Как изменить настройки навигации в swiper?

Как настроить слайдер, чтобы при нажатии на стрелки изменялись фотографии только в текущем товаре, а не одновременно во всех товарах на странице?
  • 6 марта 2024 г. 16:39
Ответы на вопрос 2
Для изменения настроек навигации в Swiper, вы можете использовать параметры и методы этой библиотеки. Например, для настройки навигационных кнопок (стрелок) можно использовать параметры prevButton и nextButton:

```javascript
var mySwiper = new Swiper('.swiper-container', {
  prevButton: '.swiper-button-prev',
  nextButton: '.swiper-button-next'
});
```

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

Пример:

HTML:
```html
<div class="swiper-container" data-swiper="1">
  <div class="swiper-wrapper">
    <!-- Фотографии товара 1 -->
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<div class="swiper-container" data-swiper="2">
  <div class="swiper-wrapper">
    <!-- Фотографии товара 2 -->
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>
```

JavaScript:
```javascript
var swipers = [];

$('.swiper-container').each(function(index, element) {
  var swiper = new Swiper(element, {
    prevButton: $(element).find('.swiper-button-prev'),
    nextButton: $(element).find('.swiper-button-next')
  });
  swipers.push(swiper);
});

$('.swiper-button-prev').on('click', function() {
  var currentSwiper = swipers[$(this).closest('.swiper-container').data('swiper') - 1];
  currentSwiper.slidePrev();
});

$('.swiper-button-next').on('click', function() {
  var currentSwiper = swipers[$(this).closest('.swiper-container').data('swiper') - 1];
  currentSwiper.slideNext();
});
```

Этот код создает отдельные экземпляры Swiper для каждого товара на странице и связывает их с соответствующими навигационными кнопками. Теперь при нажатии на стрелки будут изменяться фотографии только в текущем товаре.
Для каждой карточки отдельный слайдер new Swiper('.класс_должен_отличаться')
Похожие вопросы