CODEWITHSUNDEEP
javascriptswiper.js
Sandro
Sandro

Reputation: 73

Swiper.js, multiple swipers with multiple controls on one page

For my Swiper design, I need a new set of controls on each slide, so the controls visually slide away with the slide content itself. Normally, this is no problem.

But as soon as I add multiple swipers on one page and init them using an each function, none of the controls work anymore. Does anyone know how I can have multiple swipers with multiple sets of controls on one page?

Here is my code so far:

$('.swiper-container').each(function() {
  var next = $(this).find('.swiper-next');
  var prev = $(this).find('.swiper-prev');
  
  var swiper = new Swiper($(this)[0], {
    navigation: {
      nextEl: next,
      prevEl: prev,
    },
  });
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
  margin-bottom: 2em;
}
.swiper-slide {
  background: rgba(0,0,0,.1);
  height: 10em;
  padding: 1em;
  border-right: 2px solid red;
}
.swiper-controls {
  display: flex;
}
.swiper-controls > div {
  background: rgba(0,0,0,.2);
  border: 1px solid white;
  cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet" />

<!-- swiper #01 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #01-01 -->
    <div class="swiper-slide">
      <p>slide #01-01</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
    <!-- slide #01-02 -->
    <div class="swiper-slide">
      <p>slide #01-02</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
    <!-- slide #01-03 -->
    <div class="swiper-slide">
      <p>slide #01-03</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
  </div>
</div>

<!-- swiper #02 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #02-01 -->
    <div class="swiper-slide">
      <p>slide #02-01</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
    <!-- slide #02-02 -->
    <div class="swiper-slide">
      <p>slide #02-02</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
    <!-- slide #02-03 -->
    <div class="swiper-slide">
      <p>slide #02-03</p>
      <div class="swiper-controls">
        <div class="swiper-prev">← previous</div>
        <div class="swiper-next">next →</div>
      </div>
    </div>
  </div>
</div>

<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

Upvotes: 2

Views: 7579

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 46181

1. For next and previous arrow

You can't have multiple swiper-controls, one in each swiper-slide. You can have only one swiper-controls for each group of slides. As you can read on the official doc, prevEl and nextEl can accept only null | CSSSelector | HTMLElement.

The trick is use CSS to place that one swiper-controls in a way that look like it’s in each one:

document.querySelectorAll(".swiper-container").forEach(function (s) {
  let next = s.querySelector(".swiper-next");
  let prev = s.querySelector(".swiper-prev");

  new Swiper(s, {
    navigation: {
      nextEl: next,
      prevEl: prev
    }
  });
});
* {margin: 0; padding: 0; box-sizing: border-box;}
.swiper-container {
  margin-bottom: 2em;
}
.swiper-slide {
  background: rgba(0,0,0,.1);
  height: 10em;
  padding: 1em;
  border-right: 2px solid red;
}
.swiper-controls {
  display: flex;
}
.swiper-controls > div {
  background: rgba(0,0,0,.2);
  border: 1px solid white;
  cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet" />

<!-- swiper #01 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #01-01 -->
    <div class="swiper-slide">
      <p>slide #01-01</p>
    </div>
    <!-- slide #01-02 -->
    <div class="swiper-slide">
      <p>slide #01-02</p>

    </div>
    <!-- slide #01-03 -->
    <div class="swiper-slide">
      <p>slide #01-03</p>
    </div>
  </div>
  <div class="swiper-controls">
    <div class="swiper-prev">← previous</div>
    <div class="swiper-next">next →</div>
  </div>
</div>

<!-- swiper #02 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #02-01 -->
    <div class="swiper-slide">
      <p>slide #02-01</p>
    </div>
    <!-- slide #02-02 -->
    <div class="swiper-slide">
      <p>slide #02-02</p>
    </div>
    <!-- slide #02-03 -->
    <div class="swiper-slide">
      <p>slide #02-03</p>
    </div>

  </div>
  <div class="swiper-controls">
    <div class="swiper-prev">← previous</div>
    <div class="swiper-next">next →</div>
  </div>
</div>

<!-- embed js -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

2. For pagination bullets

However, you can have multiple paginations, those bullet points, even if it's weird because on the doc, el has the same type as nextEl and prevEl:

document.querySelectorAll(".swiper-container").forEach(function (s) {
  let next = s.querySelector(".swiper-next");
  let prev = s.querySelector(".swiper-prev");

  new Swiper(s, {
    navigation: {
      nextEl: next,
      prevEl: prev
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true
    }
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.swiper-container {
  margin-bottom: 2em;
}
.swiper-slide {
  background: rgba(0, 0, 0, 0.1);
  height: 10em;
  padding: 1em;
  border-right: 2px solid red;
}
.swiper-controls {
  display: flex;
}
.swiper-controls > div {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid white;
  cursor: pointer;
}
<!-- embed css -->
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet" />

<!-- swiper #01 -->
<div class="swiper swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #01-01 -->
    <div class="swiper-slide">
      <p>slide #01-01</p>
      <div class="swiper-pagination"></div>
    </div>
    <!-- slide #01-02 -->
    <div class="swiper-slide">
      <p>slide #01-02</p>
      <div class="swiper-pagination"></div>
    </div>
    <!-- slide #01-03 -->
    <div class="swiper-slide">
      <p>slide #01-03</p>
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <div class="swiper-controls">
    <div class="swiper-prev">← previous</div>
    <div class="swiper-next">next →</div>
  </div>
</div>

<!-- swiper #02 -->
<div class="swiper swiper-container">
  <div class="swiper-wrapper">
    <!-- slide #02-01 -->
    <div class="swiper-slide">
      <p>slide #02-01</p>
      <div class="swiper-pagination"></div>
    </div>
    <!-- slide #02-02 -->
    <div class="swiper-slide">
      <p>slide #02-02</p>
      <div class="swiper-pagination"></div>
    </div>
    <!-- slide #02-03 -->
    <div class="swiper-slide">
      <p>slide #02-03</p>
      <div class="swiper-pagination"></div>
    </div>

  </div>
  <div class="swiper-controls">
    <div class="swiper-prev">← previous</div>
    <div class="swiper-next">next →</div>
  </div>
</div>

<!-- embed js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

Upvotes: 2

Related Questions