Swiper.js with breakpoints

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

CSS

.swiper-container {
  width: 100%;
  height: 300px;
}

JavaScript

function updateSliders() {
  var intervals = {};

  if (!$('.swiper-container').length) {
    return;
  }
  
  $('.swiper-container').each(function () {
    var $container = $(this);
    var id = $container.parents('.fl-widget-instance').data('id');

    /* Uncomment this code to target only sliders in the specified accordion
    if (!$container.parents('.panel').length
      || !$container.parents('.panel').find('.panel-title').length) {
      return;
    }
    
    if ($container.parents('.panel').find('.panel-title').text() !== 'Our work with clients') {
      return;
    }
    */
    
    intervals[id] = setInterval(function () {

      //should get the swiper instance but it doesn't
      var mySwiper = $container[0].swiper;

      if (!mySwiper) {
        return;
      }

      clearInterval(intervals[id]);
      delete intervals[id];

      //this should add more slides in a single view depending on the screen width
      mySwiper.params.breakpoints = {
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        1024: {
          slidesPerView: 4,
          spaceBetween: 40,
        }
      };

      //should update the slider to render the new settings
      mySwiper.update();
    }, 200);    
  });  
}

updateSliders();

var mySwiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal',
  loop: false,
  autoHeight: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // Default parameters
  slidesPerView: 2,
  spaceBetween: 40,
  // Responsive breakpoints
  breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
    // when...