0

The title says it all. I just cant figure out how to make the grid property to work correctly. I want to display images in 2rows but swiper is not working at all. The code and current outcome is provided below-

<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>

And the result is-

The images are not showing in the 2nd row, they just dont print at all. Out of 10 images only 6 are showing horizontally which is correct if they show in both rows. :")

Looking for some suggestions on how to make it work

AbyssWalker
  • 33
  • 4

1 Answers1

0

You likely havent installed the grid module. It specifies that in the react swiper documentation

user2566720
  • 53
  • 6