DEV Community

Cover image for Swiper slider with partial view
Mahbubur Rahman
Mahbubur Rahman

Posted on

Swiper slider with partial view

new Swiper('.nisgaa-language-slider', {
            loop: true,
            centeredSlides: false,
            slidesPerView: 1,
            spaceBetween: 24,
            slidesOffsetBefore: 0,
            slidesOffsetAfter: 0,
            navigation: {
                nextEl: '.nisgaa-language-slider-container .lsi-button-next',
                prevEl: '.nisgaa-language-slider-container .lsi-button-prev',
            },
            pagination: {
                el: '.nisgaa-language-slider-container .lsi-pagination',
                clickable: true, // Makes bullets clickable
            },
            // Responsive
            breakpoints: {
                0: {slidesPerView: 1.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0},
                768: {slidesPerView: 2.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0},
                1025: {slidesPerView: 3.5, spaceBetween: 24, slidesOffsetBefore: 0, slidesOffsetAfter: 0}
            }
        });
Enter fullscreen mode Exit fullscreen mode

Top comments (0)