Как отобразить несколько элементов на слайде в карусели с реагирующим пятном?

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"
    }
]

Я знаю, что мои настройки в компоненте ниже действительны и работают нормально, но это не то, что я хочу.Я также знаю, что я сделал неправильную итерацию.Пожалуйста, посмотрите на <li> упаковщик, который имеет два <div> рядом.Я хочу, чтобы один элемент отображался слева, а два - на другом слайде.Есть идеи?

// 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 на количество слайдов, которые вы хотите показать одновременно.