@zhirk1n

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

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

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

5ed81043410cc312087225.jpeg
  • Вопрос задан
  • 80 просмотров
Решения вопроса 3
HistoryART
@HistoryART
Надзиратель
Классы кнопок тоже меняйте, что на странице, что здесь ".swiper-slider-next1"
Ответ написан
sniggering_deus
@sniggering_deus
I will live forever in the flame of your eyes.
При инициализации каждого слайдера, указывайте для каждого отдельно - навигацию:

const swiper = new Swiper(".main-slider-1", {
  slidesPerView: "2",
  spaceBetween: 10,
  grabCursor: true,
  loop: true,
  navigation: {
    nextEl: ".main-slider-1-next", // кнопка навигации для первого слайдера
    prevEl: ".main-slider-2-prev" // кнопка навигации для первого слайдера
  }
});


Разметка:

<button class="main-slider-1-prev">
    <span class="main-slider-1-prev-icon"></span>
  </button>
  <button class="main-slider-1-next">
    <span class="main-slider-1-next-icon"></span>
  </button>

const swiper = new Swiper(".main-slider-2", {
  slidesPerView: "2",
  spaceBetween: 10,
  grabCursor: true,
  loop: true,
  navigation: {
    nextEl: ".main-slider-2-next", // кнопка навигации для второго слайдера
    prevEl: ".main-slider-2-prev" // кнопка навигации для второго слайдера
  }
});


Разметка:

<button class="main-slider-2-prev">
    <span class="main-slider-2-prev-icon"></span>
  </button>
  <button class="main-slider-2-next">
    <span class="main-slider-2-next-icon"></span>
  </button>


И не забываем про стили. Оформляете как нужно - иконки, стрелочки, цвета и пр.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
//stablecode Вена
от 120 000 до 160 000 ₽
Spark Equation Санкт-Петербург
от 160 000 до 210 000 ₽
Spark Equation Санкт-Петербург
от 160 000 до 210 000 ₽