React 的 Swiper 组件的网格属性无法按预期与 NextJS 和 Tailwind 一起工作 CSS

Question

标题说明了一切。 我只是不知道如何使网格属性正常工作。 我想在 2 行中显示图像，但滑动器根本不工作。 代码和当前结果提供如下 -

<div className="">
            <Swiper className='h-[600px]' grabCursor={true} slidesPerView={4} spaceBetween={10}
                mousewheel={true} grid={{ rows: 2 }} modules={[Grid, Pagination, Mousewheel]} pagination={{ clickable: true }}>
                {images.map((img) => {
                    return (<SwiperSlide key={img.key}><img className={"scale-50"} src={img} /></SwiperSlide>)
                })}
            </Swiper>
        </div>

结果是——

图像没有显示在第二行，它们根本不打印。 在 10 张图像中，只有 6 张水平显示，如果它们同时显示在两行中，这是正确的。 :")

寻找有关如何使其工作的一些建议

Answer 1

您可能还没有安装网格模块。 它指定在 react swiper 文档中