Несколько слайдеров на одной странице Swiper Slider

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();

});

Оцените автора
Qamos
Добавить комментарий