Search code examples
javascriptjquerycsssliderslide

Swiperjs doesn't loop correctly (slider)

Got some problems with the loop setting for swiper. The issue is that it stops sliding before going into a second loop, it always stops a certain point. Never worked with swiper before, and I'm not sure if this is intended or not? Or if there is a possible fix to it.

You can see the problem in the codepen if you swipe down you will notice that it stops at the blue box, or the green box if swipping up. Is it possible to make it keep sliding somehow, or atleast making it so its not just a blank space at that position?

https://codepen.io/quality/pen/pdNQPb 

var swiper = new Swiper('.swiper-container', {
    scrollbar: '.swiper-scrollbar',
    scrollbarHide: true,
    slidesPerView: 3,
    centeredSlides: true,
    freeMode: true,
    spaceBetween: 30,
    direction: 'vertical',
    slideToClickedSlide: true,
    loop: true
});

Framework im using: http://idangero.us/swiper/api/

Solution

  • Solved it by setting a 33% height on the slides with slidesPerView: ‘auto’