Building a Customizable Swiper Slider in Webflow

Step 1: Set Up the Basics

1.1 – Add Swiper via CDN

First, include the Swiper library in your Webflow project. You’ll need to add the following files to your project’s <head> (for CSS) and before the closing </body> tag (for JS):

CSS: swiper-bundle.min.css
JS: swiper-bundle.min.js
CDNJS Link

1.2 – Structure Your HTML

Create the following structure using Webflow’s Collection Lists:

<div class="swiper"> <!-- Collection List Wrapper -->
  <div class="swiper-wrapper"> <!-- Collection List -->
    <div class="swiper-slide"> <!-- Collection Item -->
      <!-- Your Slide Content -->
    </div>
  </div>
</div>

Tip: Give your .swiper container a unique class or ID if you’re planning to use multiple sliders on the same page.

1.3 – Initialize Swiper in JavaScript

Now, instantiate the Swiper in your custom code section:

<script>
const testimonialSlider = new Swiper('.swiper', {
  loop: false,
  spaceBetween: 40,
  slidesPerView: 2.5,
  centeredSlides: false,
  speed: 900,
  grabCursor: false,
});
</script>

Step 2: Common Configurations You’ll Use

Swiper comes packed with options, but here are some of the most commonly used ones:

Autoplay

autoplay: {
  delay: 3000,
  disableOnInteraction: false,
}

Pagination Dots

pagination: {
  el: '.swiper-pagination',
  dynamicBullets: true,
}

Navigation Arrows

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

Scrollbar

scrollbar: {
  el: '.swiper-scrollbar',
  hide: false,
}

Responsive Breakpoints

breakpoints: {
  0: {
    spaceBetween: 10,
    slidesPerView: 1.2,
  },
  480: {
    spaceBetween: 30,
    slidesPerView: 1.5,
  },
  767: {
    spaceBetween: 40,
    slidesPerView: 1.5,
  },
  992: {
    spaceBetween: 40,
    slidesPerView: 2,
  },
}

Step 3: Unlock Advanced Features

Swiper also lets you add interactive and accessibility-friendly features:

Slide Effects

effect: 'fade', // or 'flip', 'cube', 'coverflow', 'cards'

Keyboard Navigation

keyboard: {
  enabled: true,
}

Mouse Wheel Navigation

mousewheel: {
  forceToAxis: true,
}

Zoom Support

zoom: {
  maxRatio: 4,
}

Example: Full Configuration

Here’s what a more complete setup might look like:

<script>
const testimonialSlider = new Swiper('.swiper', {
  loop: true,
  spaceBetween: 40,
  slidesPerView: 2.5,
  speed: 900,
  effect: 'flip',
  grabCursor: true,
  mousewheel: {
    forceToAxis: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
  },
  breakpoints: {
    0: {
      spaceBetween: 10,
      slidesPerView: 1.2,
    },
    480: {
      spaceBetween: 30,
      slidesPerView: 1.5,
    },
    767: {
      spaceBetween: 40,
      slidesPerView: 1.5,
    },
    992: {
      spaceBetween: 40,
      slidesPerView: 2,
    }
  },
});
</script>

Bonus: Creating an Infinite Loop Slider

Great for logos, testimonials, or any continuous content.

Add this CSS to make the scrolling smooth and linear:

.swiper {
  transition-timing-function: linear !important;
}

And make sure the slider loop and autoplay is configured properly:

<script>
const testimonialSlider = new Swiper('.swiper', {
  loop: true,
  spaceBetween: 40,
  slidesPerView: 2.5,
  speed: 900,
  autoplay: {
    delay: 0,
    disableOnInteraction: false,
  },
});
</script>

Wrapping Up

With Swiper integrated into your Webflow project, you’ve got a flexible, performance-friendly way to build slick sliders that go beyond the limitations of Webflow’s native component.

Need more details or want to explore more Swiper features? Check out the official Swiper documentation.

Share this post