Как сделать для каждого из четырех слайдеров на странице, свою навигацию?

Question

[zhirk1n]

На сайте есть 4 слайдера. Подключен Swiper JS. Кнопки вынесены за пределы swiper-container. Как сделать, чтобы при переключении одного слайдера, другие слайдеры не реагировали на это? Так как стрелки вынесены, все слайдеры на сайте начинают реагировать на перелистывания одного из слайдеров.

P.S стрелки вынесены за пределы контейнера потому что этого требует макет. Объединить все слайдеры в одно подключение JS не могу, так как один из слайдеров должен отображать 2 слайда (slidesPerView:2) , а остальные по одному ((slidesPerView:1).

Answer 1

[historydev]

Классы кнопок тоже меняйте, что на странице, что здесь ".swiper-slider-next1"

Comments

[zhirk1n]

Кнопки ломаются если указывать какой либо класс отличающийся от стандартного. Я так понимаю, это потому что я подключил const next и prev.

[zhirk1n]

Извиняюсь за затупы, неделю в верстке, еще учусь. Разобрался, огромное спасибо)

[historydev]

zhirk1n, это не вёрстка, это js)

Answer 2

[Максим Морев]

Вы можете совершенно спокойно каждому элементу управления добавить в разметке какой-то уникальный класс (.js-slider-1-button-prev, .js-slider-2-button-prev и так далее) подобно тому, как вы вызываете сейчас .swiper-container и .swiper-container1 и в опции передавать этот уникальный класс.
Также можно в nextEl и prevEl передавать не строку, а Element (querySelector('.your-button')) с нужной кнопкой.

Comments

[zhirk1n]

Если имелось ввиду так то они сломались

[Максим Морев]

zhirk1n, может рано ещё в свайперы? :)
Вот так сделайте, должно работать.

navigation: {
  prevEl: document.querySelector('.swiper-container .swiper-button-prev'),
  nextEl: document.querySelector('.swiper-container .swiper-button-next'),
}

Кнопки оставляете как есть штатные. В качестве prev и next кнопок указываете ссылки на элементы, которые меняете путём замены родительского для кнопок элемента. Также рекомендую не привязываться к .swiper-container - или заверните во что-то ещё, или этому же контейнеру задавайте уникальный класс в духе .js-swiper-1 и подцепляйте кнопки через него.

[zhirk1n]

Извиняюсь за затупы, неделю в верстке, еще учусь. Разобрался, огромное спасибо)