слайдеры 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"
}