How can I have multiple Swiper slideshows on a single page?

Question

I'm using Swiper Slideshow. I'm using this particular version. Here's the exact code I'm using.

When adding a second Swiper, the pagination doesn't work properly.

I tried giving a different class to the second Swiper container but it didn't work.

How can I have two of this in the same page?

Thanks.

Answer 1

Their support sent me this DEMO. It works!

You don't need to do anything to the JS File. All you need to do is add an extra class to pagination, add an extra class to the slideshow, and differentiate the rest of the classes on everything else (see code below). With this, you can have as many slideshows as you want on the same page.

<!-- Swiper -->
<div class="swiper-container swiper1">
  <div class="swiper-wrapper">
    <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 class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination1"></div>
</div>

<!-- Swiper -->
<div class="swiper-container swiper2">
  <div class="swiper-wrapper">
    <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 class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination swiper-pagination2"></div>
</div>

<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper1 = new Swiper('.swiper1', {
      pagination: '.swiper-pagination1',
      paginationClickable: true,
  });
  var swiper2 = new Swiper('.swiper2', {
      pagination: '.swiper-pagination2',
      paginationClickable: true,
  });
</script>