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

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

1 个答案: