Как сделать swiper слайдеры независимыми друг от друга?

Question

[malayamarisha]

Всем привет!

Есть блоки (может быть несколько), в которых товары должны выводиться в слайдере.
Данных блоков может быть несколько и все блоки выводятся в цикле.
Здесь пример вывода двух блоков со слайдером.
И в таком случае слайдеры зависимы друг от друга, т.е. если листать один слайдер, то листается другой.

Необходимо, чтобы данные слайдеры были независимы друг от друга.
Подскажите, пожалуйста, как возможно убрать зависимость слайдеров между собой?

Comments

[imko]

Да вроде не листается

Answer 1

[Danny Arty]

Ну так если вы выводите блоки в цикле, то логично, что и swiper нужно инициировать в цикле.

let containers = document.getElementsByClassName('promo-group__swiper-container');
Array.from(containers).forEach(function(element) {
    var swiper = new Swiper(element, {
       navigation: {
          nextEl: element.querySelector('.swiper-button-next'),
          prevEl: element.querySelector('.swiper-button-prev')
       }
    });
});

Comments

[godsplan]

Куратор js тега использует var и getElementsByClassName...

[malayamarisha]

Danny Arty

Ну так если вы выводите блоки в цикле, то логично, что и swiper нужно инициировать в цикле.

Спасибо за ответ.
С данным вариантом также слайдеры листаются вместе

[Danny Arty]

malayamarisha, а, ну дык у вас верстка неверная. swiper-wrapper у вас ul, а закрываете его div-ом. Кнопки находятся вне контейнера, если делать так, то хоть оберните каждый swiper-container и его кнопки в единый div. Поправил в примере ниже

[Danny Arty]

godsplane, позор! позор!

[malayamarisha]

Danny Arty,

Кнопки находятся вне контейнера

- есть такое, по макету так задумано, поэтому стрелки были размещены за .swiper-container.
Danny Arty, спасибо большое )

Но есть еще способ вывести стрелки за контейнером, хотя в верстке стрелки находятся в .swiper-container:
1) стрелки размещены в блоке swiper-container
2) всему блоку promo-group__swiper-block добавлены стили: display: block; position: static; - нужно для того, чтобы вынести элемент за overflow: hidden;
3) нужно чтобы у класса .swiper-container не было свойства position: relative, поэтому применяем position: initial;

<div class="promo-group__swiper-block">
    <div class="promo-group__swiper-container swiper-container">
        <ul class="promo-group__list swiper-wrapper grid-container">
                <li class="item swiper-slide"></li>
        </ul>
        <div class="promo-group__arrow-block">
            <div class="promo-group__arrow arrow--next"></div>
            <div class="promo-group__arrow arrow--prev"></div>
        </div>
    </div>
</div>

Теперь все слайдеры перелистываются вне зависимости друг от друга.

Вдруг кому пригодится )