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

Question

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>

Answer 1

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 null | CSSSelector | HTMLElement 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>