Как разместить несколько слайдеров SwiperJS

На проектах часто бывает такое, что требуется разместить несколько одинаковых слайдеров на одной странице, но инициализировать несколько раз слайдер с одним 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",
        },
    });
});