Swiper JS Slider Responsiveness in Webflow

In this video, we discussed two ways to make your Swiper JS Slider responsive in Webflow.
Method 1:
Utilize Swiper JS parameters and specify the number of slides on different breakpoints.
Access the properties here: swiperjs.com/element
Method 2:
Set slidesPerView to 'auto' and control the slides' width directly from the Webflow properties panel.
It's that simple.
Connect with me at:
Instagram: / ahmedqayyum32
Twitter: / ahmedqayyum32
LinkedIn: / ahmedqayyum32

[@laahorikitchen]

behtreen 👍

[@ahmedqayyum]

Shukrya

[@ShubhamDas-vs2vd]

how can we have multiple js sliders in one single page?

[@ahmedqayyum]

That's an excellent question, it requires to create an object, and declare every swiper as an instance of that object

[@ShubhamDas-vs2vd]

how can we have multiple js sliders in one single page?

[@KUZON99]

rename to "swiper-2", "swiper-wrapper-2", etc... - and initialize an additional swiper in the page code