Swiper-два слайдера на странице

RADYK84 RADYK84   17.11.2020 19:13   335  

Привет!

Как подключить 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',
},
});


Ответы на вопрос (3) Написать ответ
RADYK84 RADYK84   17.11.2020 19:14
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 слайде и вращаются оба...


0
RADYK84 RADYK84   17.11.2020 19:15
Движок Dle
0
wtf322 wtf322   19.11.2020 08:14
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev', 



<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

Нужно чтоб эти кнопки различались классами, в js также классы после этого поменяешь и все должно работать
0

Войдите, чтобы написать ответ
Вход Регистрация