How to display multiple items per slide in react-slick carousel?

Question

I want to display 3 items of slide/carousel per one slide. For example, I have six objects in array. I am using React and 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"
    }
]

I know that my settings in below component are valid and work fine, but that is not what I want. I also know that I did wrong iteration. Please take a look into <li> wrapper that has two <div> side by side. I want to display one item in the left side and two items in another slide. Any idea?

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