Swiper Grid not working as expected when integrated with React.

[AryamanKarde]

Hi everyone,

So I was trying to implement grid by passing these parameters, but it seems like the grid option is not being picked up the library but, when I run it in isolation then it runs properly.

So I want to know what all possible reasons there could be where Grid won't apply.

Parameters passed are listed below.

spaceBetween: 0, allowTouchMove: true, slidesPerView: 2.4266666666666667, slidesPerGroup: 2, grid: { rows: 2 },

I also tried a workaround where I manually passed values to snapGrid property to make this work but it does work on an emulator but not physical device.

Can anybody please help me out ? @nolimits4web

[nolimits4web]

That definitely works https://codesandbox.io/s/swiper-slides-grid-react-forked-nnwzm?file=/src/App.jsx

[AryamanKarde]

That definitely works https://codesandbox.io/s/swiper-slides-grid-react-forked-nnwzm?file=/src/App.jsx

What I have done is

`import Swiper from 'swiper/bundle'

new Swiper('.swiper-container', {
spaceBetween: 0,
allowTouchMove: true,
slidesPerView: 2.4266666666666667,
slidesPerGroup: 2,
grid: {
rows: 2
}
})`

This is how I am trying to initialize swiper in React. Now what I feel is I am missing some Grid Modules that needs to be pulled in, but unable to figure it out. Also I can clearly observe that swiper-grid and swiper-grid-column classnames are not getting applied to the swiper-container element.

[AryamanKarde]

That definitely works https://codesandbox.io/s/swiper-slides-grid-react-forked-nnwzm?file=/src/App.jsx

How do I add Grid Module to the list ?

[nolimits4web]

Update Swiper to latest first

[AryamanKarde]

Update Swiper to latest first

Good news, got the Grid Module this time but it is giving me this error.

Module not found: Error: Can't resolve 'swiper/react'

Even though swiper/react is present also I am unable to find swiper/css in my node modules folder.

Does this mean my bundler doesn't support Node ES Modules ?