reactjs - 我如何使用 react 光滑的 slider 来实现网格轮播布局

Question

如何使用 react slick slider 来实现网格轮播布局？我在 .map() 中放置了一个行组件，这给了我第一个想要的布局，但我似乎无法弄清楚如何在考虑幻灯片计数的同时垂直重复布局。

这是我的组件代码；它需要一组对象，然后循环生成幻灯片。

const RecentJobsSlider = (props) => {
    const settings = {
        dots: true,
        arrows: false,
        infinite: true,
        speed: 500,
        slidesToShow: 2,
        slidesToScroll: 1
    };
    const jobs = props.jobs;

    return (
        <Slider {...settings}>

            {
                jobs.map((job) => (
                    <Row className="center-v entities-grid" between="xs" between="xs">
                        <div className="col-6 entity" key={job.id}>
                            <div className="entity-top">
                                <div className="entity-image">
                                    <img src={job.img}
                                        style={{
                                            width: '50px',
                                            height: '50px',
                                            objectFit: 'contain'
                                        }} />
                                </div>
                                <div className="entity-title" >
                                    <h3>{job.name}</h3>
                                    <p>{job.sector}</p>
                                </div>
                            </div>
                            <p className="entity-desc"> {job.desc} </p>
                            <p className="entity-authors"> <span className="fa fa-map-marker"></span> {job.address} </p>
                        </div>
                    </Row>
                )
                )
            }

        </Slider>
    );
}

Answer 1

您似乎错过了 slider 上的一些设置
特别是 rows: 3, slidesToShow: 2,

const settings = {
        dots: true,
        arrows: false,
        infinite: true,
        speed: 500,
        rows: 3,
        slidesToShow: 2,
        slidesToScroll: 1
    };

<Slider {...settings}>
{ content}
</Slider>