如何在反应流畅的轮播中每张幻灯片显示多个项目？

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 更改为您希望一次显示的幻灯片数量。