слайдеры javascript

Есть два слайда на сайте, когда кликаешь по одному, второй за ним тоже повторяется, как сделать что бы они были не зависимы друг от друга ?

if ($(".about-reasons__slider").length > 0) {
    var aboutReasonsSlider = new Swiper(".about-reasons__slider", {
        slidesPerView: 1,
        spaceBetween: 20,
        allowTouchMove: true,
        speed: 800,
        loop: true,
        autoplay: {
            delay: 5000
        },
        pagination: {
    el: ".about-reasons__pagination",
    type: "bullets",
    clickable: true,
    bulletActiveClass: "isActive"
  },
        navigation: {
            nextEl: ".about-reasons__nav .-next",
            prevEl: ".about-reasons__nav .-prev"
        }
    });
}
if ($(".about-reasons__slider1").length > 0) {
    var aboutReasonsSlider1 = new Swiper(".about-reasons__slider1", {
        slidesPerView: 1,
        spaceBetween: 20,
        allowTouchMove: true,
        speed: 800,
        loop: true,
        autoplay: {
            delay: 5000
        },
        pagination: {
    el: ".about-reasons__pagination",
    type: "bullets",
    clickable: true,
    bulletActiveClass: "isActive"
  },
        navigation: {
            nextEl: ".about-reasons__nav .-next",
            prevEl: ".about-reasons__nav .-prev"
        }
    });
}

Ответы (1 шт):

Автор решения: ioszhuk

В вашем примере у каждого из слайдеров должны быть свои уникальные классы для navigation тогда они будут работать независимо друг от друга, а у вас они одинаковые:

        navigation: {
           nextEl: ".about-reasons__nav .-next",
           prevEl: ".about-reasons__nav .-prev"
        }
→ Ссылка