How to integrate Swiper.js 6(Slider/Carousel - mobile touch) & Webflow CMS

Update august 2021 - Swiper 7.0 change class names. This guide is for SWIPER 6 (change swiper-container class name to swiper)
Migration Guide to Swiper 7

Vote for this wishlist idea CMS Slider:

https://wishlist.webflow.com/ideas/WEBFLOW-I-94

Demo: https://test-c0d8d3.webflow.io/swiper

Swiper - amazing mobile-friendly slider.
The only plugin supports: preventClicks Parameter (Prevent accidental unwanted clicks on links during swiping) (Great for portfolio/articles/products slider when the entire card is clickable).

HOW TO: Less than 1 minute
** (Minimal JS knowledge is required).

Start point:

Basic collection list

After:


Step 1 - Include Swiper Files

1.1. CSS

Page setting (Gear icon) copy-paste inside <head> tag

<!-- swiper CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.css">

image

1.2. Javascript

copy-paste before <body> tag

<!-- swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>

image

Step 2 - HTML Layout

Create classes:

  1. For Collection List Wrapper ==> add swiper-container
  2. Collection List ==> swiper-wrapper
  3. Collection Item ==> swiper-slide

image

Step 3 - Add arrows and pagination HTML markup by code (append)

Why? (No way to put extra div/embed-HTML inside collection list).

6 Lines code solution:

copy-paste

<!-- Swiper & Webflow CMS collection - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
 var swiperNodes = "";
 var pagination = '<div class=swiper-pagination></div>';
 var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
 var scrollbar = '<div class="swiper-scrollbar"></div>';
 var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons, scrollbar);
 /* loop throw all swipers on the page */
 $('.swiper-container').each(function( index ) {
   $( this ).append(swiperNodes);
 });
</script>

Very simple code idea (Can skip the explanation):

The append() method inserts specified content at the end of the selected elements.

  • Full list of options (API): https://swiperjs.com/api/
  • For regular CMS slider (Without CMS) it’s ok to add divs and classes manually.

Step 4 - swiper JS Initialize (arrows & Pagination)

Copy Paste code (Before body).
I set some useful parameters (Like breakpoint = responsive slider).

<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 20,
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2,
        spaceBetween: 30,
      },
      988: { /* when window >= 988px - webflow desktop */
        slidesPerView: 4,
        spaceBetween: 40,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>

** .swiper-container is the class we added on step 2.

Step 5 - styling the card (Not mandatory)

Add card extra div inside swiper-slide (Like this we will not do any change to swiper-slide core styles == safier).

Useful to add margin-bottom for the swiper-slide (room for pagination - and thats it):
image

Full copy-paste code

copy-paste Inside head

<!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.css">

copy-paste Before body

<!-- swiper 6 JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.8.4/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2,
        spaceBetween: 15,
      },
      988: { /* when window >= 988px - webflow desktop */
        slidesPerView: 3,
        spaceBetween: 20,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  })
</script>

6. Publish:

Extra Reading:

Things go wrong?

  • Style/Layout: Don’t add any extra “crazy” CSS properties to swiper core classes (swiper-container/swiper-wrapper/swiper-slide) => (Like display grid for swiper-wrapper -or- position absolute for the swiper-slide).
  • Webflow site tree - check again your class names.
  • Check if you Copy-Paste the custom code (before body (javascript) + head (css)).
  • Check for red console errors (Under your publish site ctr + shift + i inspect).

Related:

owl carousel 2 -

** I know this swiper very well (API/Custom code) - if someone needs something (Write to me in private).

15 Likes

Basic styling changes + Tips/Tricks:

A. Change bullets color:

!-- swiper 6 CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper-bundle.min.css">

<!-- swiper styles -->
<style>
  span.swiper-pagination-bullet {
      background: purple;
  }
</style>

**image **

B. Change arrows color and size:

<style>
/*change color*/
.swiper-button-prev, .swiper-button-next{
   color: purple;
}
/* change size */
.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 26px;
}
</style>

C. Hide arrows on mobile

In my opinion no need for arrows on mobile.

<style>
  @media only screen and (max-width: 767px) {
    .swiper-button-next, .swiper-button-prev {
      display: none;
    }
  }
</style>

D. Create auto layout “cutting edge” slider

Change slidesPerView to auto

slidesPerView: 'auto',

Only works by Custom CSS - add this for example:

<style>
.swiper-slide{
   width: 60%;
}
</style>

Or use slidesPerView: 1.2, (Some decimal number)

E. Add styles for the active slide:

.swiper-slide-active added by js.

<style>
  .swiper-slide.swiper-slide-active .card{
  	background: red;
    color: white;
  }
</style>

By webflow:

  1. Add combo class
  2. Remove this class (swiper will add this class “on fly”):

If you want to edit the active class follow again step 1 (Add combo → change style x - remove and publish).

F. Responsive images:

Put inside your slider responsive images (Always fit slide width)

G. Load more than one slider on the same page:

Same setting (useful if the swiper is part of collection item inside collection list"nested idea").

##USE DIFF CODE structure##
$(".swiper-container").each(function(index, element){

<!-- swiper 6 JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Swiper - Extra Step - add arrows and pagination html markup by code (Append) -->
<script>
  var swiperNodes = "";
  var pagination = '<div class=swiper-pagination></div>';
  var next_prev_buttons = '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>'; 
  var scrollbar = '<div class="swiper-scrollbar"></div>';
  var swiperNodes = swiperNodes.concat(pagination, next_prev_buttons);
  /* loop throw all swipers on the page */
  $('.swiper-container').each(function( index ) {
    $( this ).append(swiperNodes);
  });
</script>
<!-- swiper JS Initialize -->
<script>
  let swiperCMSglobalSetting = {
    // Optional parameters
    slidesPerView: 1,
    spaceBetween: 30,
    freeMode: false,
    loop: true,
    centeredSlides: false,
    // Enable lazy loading
    lazy: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    keyboard: {
      enabled: true,
    },
    breakpoints: {
      0: { /* when window >=0px - webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
      },
      767: { /* when window >= 767px - webflow tablet */
        slidesPerView: 2,
        spaceBetween: 15,
      },
      988: { /* when window >= 988px - webflow desktop */
        slidesPerView: 3,
        spaceBetween: 20,
      }
    },
    /* uncomment if you want autoplay slider
    autoplay: {
      delay: 3000,
    },
    */
    /* uncomment if you want scrollbar
     scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
      },
    */
  }

  $(".swiper-container").each(function(index, element){
    var $this = $(this);
    var swiper = new Swiper(this, 
      // your settings ...
      swiperCMSglobalSetting
    );
  });
</script>

Difference setting - on webflow add second class to swiper-container (“combo”) - and Initialize swiper (Step4 above) more than one time (Each time use the correct combo-class).

new Swiper ('.slider_1',/*....rest of the code
new Swiper ('.slider_2',/*....rest of the code
new Swiper ('.slider_3',/*....rest of the code

<script>
var mySwiper = new Swiper ('.posts', {
    // Optional parameters
    slidesPerView: 5,
    autoplay: {
      delay: 3000,
    }
  })

  var mySwiper = new Swiper ('.portfolio', {
    // Optional parameters
    slidesPerView: 2,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    autoplay: {
      delay: 3000,
    }
  })
</script>

H. Create custom next/prev buttons (Outside of the slider)

For this button:

Change this setting:

 navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

To

 navigation: {
    nextEl: '.custom_next',
    prevEl: '.swiper-button-prev',
  },

Not working? Check if webflow selector (chrome Inspect element) match nextEl class (.some-value) ** For teams its better to use #id selector (Because its easier to rename classes over time).

I - Keep “crop” aspect ratio of images inside CMS collection :

8 Likes

Ah, this is fantastic. I might create my own thread, to not distract here from your excellent tutorial, but I wanted to ask: have you ever gotten Swiper.js’ integrated image lazy loading to work?

I’ve made a few sliders with Swiper.js now and, like you said, it’s got the best set of features. Except lazy loading.

If you’ve gotten Swiper’s lazy loading to work on Webflow, I’ll make a separate thread to troubleshoot. As of now, I’ve followed their API to a tee & it claims images have been lazy loaded (i.e,. adds the class swiper-lazy-loaded, note the ed), but Chrome’s F12 Network tools say that’s just a lie.

I’ve tried the notable lazysizes tutorial here, but it wrecks Swiper.js’ layout (I think the 3x JS libraries must be a mess interacting with each other: Swiper + lazy-sizes + Webflow).

Alas, I still love Swiper.js for small sliders.

2 Likes

Really awesome to see this working, I have been with trying to build one for eCommerce slider image with thumbnails below

It would be awesome if you could take a look at it and see if you can get it to work.

1 Like

Would it be possible to get the images/backgrounds from the multi image fields?

I figured out it works with multi image fields as well!
Unfortunatly I cant add other cms field to the div. For example the subline/name. Would it be possible to get the „alt-tag of the image to use as as a field? Its the only thing related to the image. I am no coder, so I dont know if this is possible. :slight_smile:

Hello,
Quick question, which layer did you embed the custom code in collection list?

@elected ! Did you get it work?

I didn’t use embed code but Custom code in the head and body tags.

Maybe try this trick/idea:

1 Like

I can’t seem to get mine to work. The code isn’t updating the ‘slides per view’, and it’s not scrolling. Should I enable the ‘Limit Items’ setting for the CMS?

Preview Link

Your code missing step 1.1 and 1.2 (You should load swiper assets).
The best idea is to compare my screenshots to yours.

Related to your mistake:

1 Like

Hi @Siton_Systems,
Thanks a lot for this tutorial, I used it on multiple projects. However there is a new version swiper.js with some new naming, see: swiper/CHANGELOG.md at master · nolimits4web/swiper · GitHub. It would be really great if you can give an update or at least let us know which names need to be renamed to the new ones.

Thanks in advance.

1 Like

Thanks. This is a very rare change. I update the answer :frowning: The problem now a lot of swiper sites will not work).

This is why its better to use specific cdn version - list her:

1 Like

Thanks @Siton_Systems this did the trick.
In the change log I found they recommend to add:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Would you advice to add both as well?

NO - Both files are the same (One minify and one not).
Its better to use the minify version .min (reduce file size).

Open this files to see the difference:

not minify:
https://unpkg.com/swiper/swiper-bundle.css

minify:
https://unpkg.com/swiper/swiper-bundle.min.css

The term:

Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on. Réduire la taille des ressources HTML, CSS et JavaScript  |  PageSpeed Insights  |  Google for Developers

I love swiper.js, but on ios (ipad and iphone) it has a few little white flashes while dragging. I found not much about it how to fix it. It should be resolved in the newer versions, but for me it still happens. Does anyone know a solution?

Klaus

Can’t see any flashing. Also, the official docs example gives you “flashes” (-or- only on webflow)?

Try this (Very old issue):

The best idea is to open new GitHub issue her:

you are right, its only on my sliders in webflow. The demos on the swiper website work.

Here is my link. But I will check the hints above. Thank you!

It just happens a few times. not always.

https://wethepeople-ccdf94.webflow.io/stories/new-teamrider-los-locos
(the first slider on top)

https://preview.webflow.com/preview/wethepeople-ccdf94?utm_medium=preview_link&utm_source=designer&utm_content=wethepeople-ccdf94&preview=434778a62368093259bdabde3d83e210&pageId=5ebd4a328008e87c7dbb1e3a&itemId=5ebd4a328008e8641dbb1ec5&mode=preview

This is awesome, thanks! I am wondering is there a way to move the NEXT and PREV buttons off of the pictures? Like on my site i have white space to the sides i want to put them in but I cannot figure out how to make them move. I also have more than one, so I only want some of them to do this behavior? Any help would be appreciated!