Streaming live at 10am (PST)

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

important important important important important
Update july 2020 - swiper 6.0 changelog rename files (The old CDN path not work. FIX==> Rename the css/js paths).

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://unpkg.com/swiper/swiper-bundle.min.css">

image

1.2. Javascript

copy-paste before <body> tag

<!-- swiper JS -->
<script src="https://unpkg.com/swiper/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 - 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>'; 
 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>

Very simple code idea (Can skip the explanation):

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

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',
    },
    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

Add extra div inside swiper-slide - add color/border-radius/shadow and so on.

Why extra div? Don’t add any extra “crazy” CSS properties to swiper core classes (Like display grid for the wrapper, or position absolute for the slide).

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://unpkg.com/swiper/swiper-bundle.min.css">

copy-paste Before body

<!-- 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>
  var mySwiper = new Swiper ('.swiper-container', {
    // 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,
      },
    */
  })
</script>

6. Publish:

Extra Reading:

Related:

owl carousel 2 -

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

11 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 - do nothing :slight_smile:

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).

5 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: https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md. 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. https://developers.google.com/speed/docs/insights/MinifyResources