How to Use It

A couple of months ago, I worked on one project where I needed some slider for the homepage that would swipe hero content on scroll. You can make it with webflow tools, but pre-scroll doesn't work as smoothly as I wanted. So I decided to use the swiper.js library. It is free to use for any project. Here is the license.

For anyone who needs this kind of interaction, feel free to copy the project.

‍

Steps how to use swiper.js with Webflow

‍

Use with Webflow CMS Collection

You will need to add CMS collection list to the page and name it "swiper-container". the wrapper you will name "swiper-wrapper" and the item itself you will name "swiper-slide". It is important to use exactly the same names.

Example of CMS collection names in Webflow

‍
After that you can add anything you want inside the swiper-slide and connect to your CMS collection. In my example I connected the images for desktop and smartphone and the title of the slides. All of these I wrapped in "div-link".  You can see that there are 2 div items added to the swiper-slide. One of them I use for desktop image and other one for smartphone image. I would like to do it with just one image, but Webflow doesn't let you add different images to the same div element from the cms collection, if you use content from your CMS collection.

‍
When you properly connect everything and add your content, check if you set all properties to "Swiper-container" and "Swiper-wrapper".

‍
In my case I wanted to have slides full screen. so I used Height 100VH for the Swiper-container with Overflow hidden. And for "Swiper-slide" I used Width and Height 100% and 100VH, with Overflow Hidden as well.

The last step is to add code to the Settings page and publish it. You will not see any changes before you publish the page, because custom code doesn't work in preview mode in Webflow.

Homepage settings custom code

There is one thing I want to mention. This swiper has issue in IE, that is why we need to turn it off in IE and add separate code for IE slides.

More showcases and link to library : https://swiperjs.com/

Code for reference:

Add this Inside <head> tag
‍
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script type="text/javascript">var ua = window.navigator.userAgent;
window.isIE = /MSIE|Trident/.test(ua);if ( isIE ) {
 document.documentElement.classList.add('ie');
 }

</script><style>.ie .swiper-container{
 height: auto;
}

.ie .swiper-wrapper {
display: block !important;
 height: auto;
}

.ie .swiper-slide {
height: 800px;
}
</style>
‍
Add this before </body> tag

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script><!-- Initialize Swiper -->
<script type="text/javascript">
const slides = document.getElementsByClassName('swiper-slide');
const slidesLength = slides.length;
var el = document.getElementById('swiper-wrapper-ie');
var el2 = document.getElementById('swiper-ie');if ( window.isIE ) {
 document.documentElement.classList.add('ie');
el.style = null;
el2.style = null;
}if (slidesLength > 1 && !window.isIE) {
   var MySwiper = new Swiper('.swiper-container', {
       observer: true,  
       observeParents: true,
     
       speed: 1200,
       direction: 'vertical',
       mousewheel: {releaseOnEdges: false},
       
       followFinger: false,
       touchReleaseOnEdges: true,
       longSwipes: false,
       parallax: true,
       pagination: {
           el: '.swiper-pagination',
           clickable: true,
           renderBullet: (index, className) => {
               const value = 'text' || '';
               return '<span class=' + className + '>' + '<span class="s-label">' + value + '</span></span>';
           }
       },
       on:{
       slideChange: (swiper) => {
           const {offsetTop} = swiper.el;
           window.pageYOffset !== offsetTop && window.scrollTo({
               top: offsetTop,
               behavior: 'smooth'
           });
       },
       slideChangeTransitionEnd: (swiper) => {
           const activeIndex = swiper.activeIndex;
           swiper.params.mousewheel.releaseOnEdges = activeIndex === 0 || (activeIndex === slidesLength-1);
       }
       }
   });
   }
</script>