Привет!
Как подключить 2 слайдера на странице?

1) Первый слайдер
swiper.js

var swiper = new Swiper('.swiper1', {
slidesPerView: 5,
spaceBetween: 30,
slidesPerGroup: 1,
autoplay: {
delay: 5000,
},
breakpoints: {

slidesPerView: 2,
},
modifier: 1,
shortSwipes: true,
loop: true,
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',


},
});


Второй:

var swiper = new Swiper('.swiper2', {
effect: 'flip',
grabCursor: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});

2) На главной html :
1 слаидер:
<div class="swiper-container swiper1">
<div class="swiper-wrapper">

{selections id="22,4,6,7,9,10" sort="desc" order="date" cache="yes" template="custom-slide" limit="30"}
</div><br>

<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>


2 слаидер:

<div class="swiper-container swiper2">
<div class="swiper-wrapper">
{selections id="22,4,6,7,9,10" sort="desc" order="date" cache="yes" template="custom-slide2" limit="30"}
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

В результате они зависят друг от друга: Тыкаешь стрелку на 1 слайде и вращаются оба...