如何在反應流暢的輪播中每張幻燈片顯示多個項目？

Question

我想每張幻燈片顯示 3 個幻燈片/輪播項目。 例如，我在數組中有六個對象。 我正在使用 React 和 React Slick。

// data
const dataslide = [
    {
        "id": "1",
        "title": "One"
    },
    {
        "id": "2",
        "title": "Two"
    },
    {
        "id": "3",
        "title": "Three"
    },
    {
        "id": "4",
        "title": "Four"
    },
    {
        "id": "5",
        "title": "Five"
    },
    {
        "id": "6",
        "title": "Six"
    }
]

我知道我在下面組件中的設置有效並且工作正常，但這不是我想要的。 我也知道我做了錯誤的迭代。 請查看並排具有兩個<div> <li>包裝器。 我想在左側顯示一個項目，在另一張幻燈片中顯示兩個項目。 任何的想法？

// React component
class App extends Component {
    render() {
        let settings = {
            draggable: false,
            slideToShow: 1,
            autoplay: false,
            dots: true,
            lazyLoad: 'ondemand',
            arrows: true,
        }
        return (
            <ul>
                <Slider {...settings}>
                    {
                        dataslide.map((item, i) => {
                            return (
                                <li key={i}>

                                    // left side
                                    <div className="left">
                                        <div className="item">{item.title}</div>
                                    </div>

                                    // right side
                                    <div className="right">
                                        <div className="item">{item.title}</div>
                                        <div className="item">{item.title}</div>
                                    </div>

                                </li>
                            )
                        })
                    }
                </Slider>
            </ul>
        )
    }
}

Answer 1

將 slideToShow 更改為您希望一次顯示的幻燈片數量。