Problem with navigation button on several sliders

[keyvanlotfi]

I have several sliders on one page. I gave them the same class and initialized them (swiper-container).
But when I click on one of navigation buttons, all sliders will move.
how can I solve this?

[vltansky]

You should init each slider separatly.
see #273

use jQuery each :

$('.my-swiper').each(function (index) {
    var mySwiper = new Swiper($(this)[0],{
        //Your options here:
    });
});

Originally posted by @evolutionxbox in #273 (comment)

or just give each slider a name:

<div class="swiper-container s1">
  ...
</div>
<div class="swiper-container s2">
  ...
</div>
<div class="swiper-container s3">
  ...
</div>
<script>
var swiper1 = new Swiper('.s1', { /* Options here */ })
var swiper2 = new Swiper('.s2', { /* Options here */ })
var swiper3 = new Swiper('.s3', { /* Options here */ })
</script>

Originally posted by @nolimits4web in #273 (comment)

[keyvanlotfi]

i did this way. but the problem still exist...

[keyvanlotfi]

i tried this code:

    <script>
        $(".swiper-container").each(function(index, element){
            var $this = $(this);
            var swiper = new Swiper(this, {
                nextButton: $this.find(".swiper-button-next")[0],
                prevButton: $this.find(".swiper-button-prev")[0]
            });
        });
    </script>

[niklasp]

give each one a unique id like <div id="id3821" class="swiper-container s3"> then in settings do:

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

[AndrewBogdanovTSS]

According to documentation:

uniqueNavElements | boolean | true | If enabled (by default) and navigation elements' parameters passed as a string (like ".pagination") then Swiper will look for such elements through child elements first. Applies for pagination, prev/next buttons and scrollbar elements

have you tried manually setting it to true?
If that won't help you should manually find closest navigation button. I use Vue so I can just assign ref to those elements and reference them via $refs