swiper.js

Swiper.js is another fantastic JS library for creating dynamic carousels in your website.

Using, in Webflow

Swiper.js docs on using swiper.js in Webflow;

• For navigation, auto-creating elements is usually the easiest.

Timothy Ricks is a master of creating and explaining some very cool Webflow techniques, and carousels are no exception.

• Swiper.js example in Webflow - Timothy Ricks
• https://webflow.com/made-in-webflow/website/Swiperjs-Slider
• Cloneable
• https://www.youtube.com/watch?v=f1l25JX1vhI&ab_channel=IljavanEck

Cloneables

• ‍Webflow CMS Sliders with Swiper JS - Cloneable - Flow Ninja

SwiperJS Studio

I haven't tested this, Swiper has released a Studio that allows you to build swiper code more interactively. This may or may not be useful for Webflow builds.

https://studio.swiperjs.com/

https://studio.swiperjs.com/play

Creative Uses in Webflow

https://www.youtube.com/watch?v=V0QjYCSglFo&ab_channel=Tambi%C3%A9n

https://www.youtube.com/watch?v=OCvFPcFmlUk&ab_channel=TimothyRicks

Important Tips

Here are some important tips for using SwiperJS with Webflow.

Basic construction

Webflow's collection list is fairly ideal for the swiper construction, however it does not provide a space for navigation, scrollbar, and pagination elements in the location that swiper.js prefers ( just inside of the outermost collection wrapper ).

Two ways to deal with this;

• Use create elements feature of swiperjs and let it just create the elements itself.
• Place pagination and navigation chevrons below. Wrap all of this in a DIV, and set it to relative positioning- you'll likely have to override this in CSS as swiper.js changes it. This allows you to position your nav chevrons overlaid left and right.

Multiple swipers

Use Webflow's subclasses to distinguish variations, so that you can have multiple swipers on the page at the same time.

Image swipers

For images inside of your Swiper, make certain to disable responsive images in Webflow. Otherwise, you may see inconsistenly-sized images.

Alternative navigations

You can do a right-only chevron navigation, but you need to remove the left element entirely ( not just skip the element reference ).

Also swiper sometimes applies a ".swiper-button-lock" class which hides the chevron initially. You'll need to override that with display: flex, e.g.

_{.swiper-button-next.swiper-button-lock {
   display: flex;
}}

Internal Notes

https://webflow.com/design/ref-swiper-js

‍