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
