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

Question

[pashabomber]

lsp-spb.volodinweb.ru/catalog-inner2.html - есть страница, на ней список товаров. В каждом товаре есть слайдер с фото.

Инициализация слайдера:

var partnersSlider = new Swiper('.catalog-item-slider', {
    slidesPerView: "auto",
    loop: true,
    speed: 600,
    navigation: {
      nextEl: ".nav.next",
      prevEl: ".nav.prev",
    }
  })

Проблема в том, что при нажатии на стрелки в этом слайдере листаются фото во всех товарах сразу. Как сделать, чтобы стрелки листали только фото в текущем товаре? Для каждого товара добавлять свою инициализацию галереи не подходит.

Answer 1

[Сергей delphinpro]

Разметку вы не показали, поэтому покажу суть. Нужно для каждого слайдера указывать именно его кнопки навигации, а не просто селектор, который выбирает все кнопки на странице.
Часть правильного решения уже подсказали в других ответах.

<div class="catalog-item">
  <div class="catalog-item-slider">Слайдер</div>
  <button class="nav prev"></button>
  <button class="nav next"></button>
</div>

document.querySelectorAll('.catalog-item').forEach(item => {
  new Swiper(item.querySelector('.catalog-item-slider'), {
    slidesPerView: "auto",
    loop: true,
    speed: 600,
    navigation: {
      nextEl: item.querySelector(".nav.next"),
      prevEl: item.querySelector(".nav.prev"),
    }
  });
});

Answer 2

[inkShio]

document.querySelectorAll('.catalog-item-slider').forEach(el => {
  new Swiper(el, {
    ...настройки
  });
});

Попробуй так.

Answer 3

[Maksym Sahaidak]

Для каждой карточки отдельный слайдер new Swiper('.класс_должен_отличаться')