На проектах часто бывает такое, что требуется разместить несколько одинаковых слайдеров на одной странице, но инициализировать несколько раз слайдер с одним JS шаблоном не совсем правильно. Так как сделать это правильно?
На самом деле это все легко и просто. В этой статье я покажу как сделать это.
Ставим как обычно слайдер, но добавляем атрибут data с удобным названием
<div data-slider-id="slider-1" class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
Так же делам инициализацию слайдера, но уже не стандартную как в документации
var swiper_list = $("[data-slider-id]");
$(swiper_list).each(function() {
let swiper_slider_id = $(this).attr('data-slider-id');
var swiper = new Swiper(".mySwiper", {
spaceBetween: 10,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});