How to implement Swiper JS in your Webflow projects.
Code & WanderSee resource
Add to Inside <head> tag
Add to Before </body> tag
Steps & Description
Swiper with CMS Collections
1. Add the following classes to the Collection layers:
Collection Wrapper = swiper
Collection List = swiper-wrapper
Collection Item = swiper-slide
2. Add a secondary class to the Collection Wrapper that will be targeted by the Swiper Initialiser.
This way you will be able to add multiple sliders to the page.
3. Copy and paste the code above
Change the .mySwiper class in the initialiser to the secondary class you created.
4. Customise the navigation and pagination CSS
5. Style the content inside the slide
Swiper without CMS
1. Add 3 divs one inside the other
2. Add the following classes:
Outer div = swiper
Middle div = swiper-wrapper
Inner div = swiper-slide
3. Follow steps 2 - 5 above
Tips & Notes
If you have the same slider settings on various pages you can use the same Swiper initialiser and target the same class.
Don't add any CSS like padding, flex or gaps to the slider-wrapper.