Home » Блог » Несколько слайдеров на одной странице Swiper Slider
Несколько слайдеров на одной странице Swiper Slider
Автор devel На чтение 1 мин Просмотров 371 Опубликовано
document.addEventListener('DOMContentLoaded', () => {
const sliderswork = document.querySelectorAll('.tabs-swiper');
let workPag = document.querySelectorAll('.tabs__pag');
let navnext = document.querySelectorAll('.tabs__next');
let navprev = document.querySelectorAll('.tabs__prev');
let mySwipersW = []
function sliderinit() {
// Создаем все слайдеры
sliderswork.forEach((sliderw, index) => {
// console.log(slider)
if (!sliderw.swiper) {
mySwipersW[index] = new Swiper(sliderw, {
slidesPerView: 2,
spaceBetween: 12,
pagination: {
el: workPag[index],
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">' + (index + 1) + "</span>";
},
},
navigation: {
nextEl: navnext[index],
prevEl: navprev[index],
},
breakpoints: {
"768": {
slidesPerView: 4,
spaceBetween: 24,
},
"1276": {
slidesPerView: 4,
spaceBetween: 32,
},
},
});
} else {
return
}
})
}
sliderinit();
});