Code Tricks

Swiper JS

How to implement Swiper JS in your Webflow projects.

Created by

Code & Wander

See resource

Code

Add to Inside <head> tag

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>


<style>
 .swiper {
    padding: 10px 56px 50px 56px; /* Padding for the navigation and pagination */
    width: 100%;
 }

 .swiper-pagination-bullet { /* Styling for pagination bullets */
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 24px;
    font-size: 16px;
    color: #B2B5BE;
    opacity: 1;
    background: transparent; /* define colour */
    display: flex;
    border-radius: 50%;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    border: 2px solid #F09600; /* define colour */
    margin-right: 6px;
    margin-left: 6px;
  }
  
 .swiper-pagination-bullet.swiper-pagination-bullet-active{ /* Styling for active bullet */
    background-color: #F09600; /* define colour */
    height: 20px;
    width: 20px;
  }
  
 .swiper-button-next, 
 .swiper-button-prev { /* Styling for navigation buttons */
    background-color: #F09600;
    height: 36px;
    width: 36px;
    border-radius: 36px;
 } 
 
 .swiper-button-next { /* Styling for the next button */
   right: 0px;
 }
 
 .swiper-button-next:after { /* icon inside next button */
    content: url(); /*link to asset */
    font-size: 1px;
 }
 
 .swiper-button-prev { /* Styling for the previous button */
    left: 0px;
 }
 
 .swiper-button-prev:after { /* icon inside previous button */
    content: url(); /* link to asset */
    font-size: 1px;
 }
 
</style>

Add to Before </body> tag

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Append navigation and pagination -->
<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').each(function( index ) {
   $( this ).append(swiperNodes);
 });
</script>

<!-- Initialise Swiper -->
<script>
  var swiper = new Swiper ('.mySwiper /*update to the one used*/', {
    // Optional parameters, remove if not needed
    slidesPerView: 3,
    spaceBetween: 30,
    loop: true,
    centeredSlides: false,
    autoplay: {
      delay: 3000,
    },
    keyboard: {
      enabled: true,
    },
    // Swiper Nodes modules
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    scrollbar: {
        el: '.swiper-scrollbar',
        hide: true,
    },
    // Breakpoints
    breakpoints: {
      0: { /* Webflow mobile landscape/portriat */
        slidesPerView: 1,
        spaceBetween: 10,
      },
      767: { /* Webflow tablet */
        slidesPerView: 2,
        spaceBetween: 15,
      },
      988: { /* Webflow desktop */
        slidesPerView: 3,
        spaceBetween: 20,
      }
    },
  })
</script>
Copied!

Tutorial

Steps & Description

Swiper with CMS Collections

1. Add the following classes to the Collection layers:

Collection Wrapper = swiper

Collection List = swiper-wrapper

Collection Item = swiper-slide

2. Add a secondary class to the Collection Wrapper that will be targeted by the Swiper Initialiser.

This way you will be able to add multiple sliders to the page.

3. Copy and paste the code above

Change the .mySwiper class in the initialiser to the secondary class you created.

4. Customise the navigation and pagination CSS

5. Style the content inside the slide

Swiper without CMS 

1. Add 3 divs one inside the other

2. Add the following classes:

Outer div = swiper

Middle div = swiper-wrapper

Inner div = swiper-slide

3. Follow steps 2 - 5 above

Tips & Notes

If you have the same slider settings on various pages you can use the same Swiper initialiser and target the same class.

Don't add any CSS like padding, flex or gaps to the slider-wrapper.