SEO Сообщество: Спрашивайте и помогайте
Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.
Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.
RADYK84
17.11.2020 19:13
5 100
Привет!
Как подключить 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',
},
});
Поможем улучшить ваш сайт.
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 слайде и вращаются оба...
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
Нужно чтоб эти кнопки различались классами, в js также классы после этого поменяешь и все должно работать