[Bug] Swiper is not looping correctly

[AndrewBogdanovTSS]

Vue.js version and component version

2.5.17

Nuxt version

2.0.0-25550715.56db988

Reproduction Link

https://github.com/AndrewBogdanovTSS/nuxt2-awesome-swiper

Steps to reproduce

• Specify swiper options as stated below
• Set div.swiper-slide style width to auto to wrap to a size of the provided image

Swiper settings config object

swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    loop: true,
                    slidesPerView: 'auto',
                    loopedSlides: 10
                }

What is Expected?

Swiper is looping indefinitely in both directions

What is actually happening?

Swiper is looping indefinitely only backwards

[vasiliysmirnov]

@AndrewBogdanovTSS the same problem but my settings looks like this

swiperOption: {
                    loop: true,
                    slidesPerView: 1
}

and looping does not working in both direction

[dw72]

I have this problem too. My options:

        autoplay: { delay: 5000 },
        keyboard: { enabled: true },
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          renderBullet: (idx, className) =>
            `<a href="#" class="${className}">${idx + 1}</a>`
        },
        slidesPerView: 1,
        spaceBetween: 16

[dw72]

Ok for me this reolved the problem: https://github.com/surmon-china/vue-awesome-swiper/issues/322#issuecomment-383888576

[AndrewBogdanovTSS]

@dw72 didn't help in my case

[achimoraites]

these settings worked for me :+1:

      swiperOption: {
	slidesPerView: 1,
	autoplay: { delay: 2000 },
         spaceBetween: 30,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      }

It seems that by adding autoplay the slider works as expected.

[AndrewBogdanovTSS]

@Cyb3rN4u7 but what if I don't want autoplay behavior?

[dw72]

@AndrewBogdanovTSS you tried set autoplay: flase or call mySwiper.autoplay.stop();?

[achimoraites]

@AndrewBogdanovTSS what version do you currently use ? My version is "vue-awesome-swiper": "^3.1.3"

[ptucky]

Ok for me this reolved the problem: #322 (comment)

Thank for this solution

[StijnKlarenbeek]

The swiper slides fine but on the first slide the animation just doesn't work at all. This only happens when loop is set to true which I NEED.

Settings:

swiperOption: {
        loop: true,
        effect: 'coverflow',
        grabCursor: false,
        slidesPerView:'auto',
        centeredSlides: true,
        coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 400,
            modifier: 1,
            slideShadows : false,
        }, 
        autoplay: {
            delay: 1000,
            disableOnInteraction: false,
        },
}

[Victor116]

La configuración más completa para el swiper tipo effect coverflow

swiperOption: {
      centeredSlides: true,
      effect: 'coverflow',
      grabCursor: true,
      loop: true,
      slidesPerView: 2,
      autoplay: {
	delay: 2500,
	disableOnInteraction: false
      },
      coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true
      }
    }

[AndrewBogdanovTSS]

Could someone investigate the origin of an issue instead of pasting random configs that "works"?

[MrToxy]

I'll be referencing this issue https://github.com/surmon-china/vue-awesome-swiper/issues/322#issuecomment-383888576 as it solved my problem using this config:

 swiperOptions: {
      init: true,
      slidesPerView: 'auto',
      centeredSlides: true,
      loop: true,
      loopedSlides: 0,
      slidesPerGroup: 1,
      spaceBetween: 30
    }

basically only render the swiper once you have data (slides)

[abdessamadely]

For me I was using it with dynamic data, and even after the data is ready, before initialization, the loop wasn't working

setTimeout(() => {
    this.initHeroSwiper();
}, 400);

had to wait so the component get rendered, and that solved my issue

[labs20]

this.initHeroSwiper()

Please, what is inside in this function of yours?

Thanks

[abdessamadely]

initHeroSwiper() {
    let height = window.innerWidth * 0.42207;
    if (height > 650) height = 650;
    this.$refs.heroSwiperContainer.style.height = `${height}px`;

    let mySwiper = new Swiper('.hero-swiper-container', {
        loop: true,
        autoplay: true,
        roundLengths: true,
    });

    mySwiper.on('resize', e => {
        let height = e.width * 0.42207;
        if (height > 650) height = 650;
        this.$refs.heroSwiperContainer.style.height = height;
    });
},

[mateomm22]

Added this to the swiperOptions and it is working.

slidesPerGroup: 1

[AvdeevaEvgeniya]

I have this problem too! If I slide to the left, everything seems fine, but when I swipe to the right, the loop doesn`t work. I think the issue reproducible when width of all the slides (not cloned) less than width of "viewport".

[AvdeevaEvgeniya]

"centeredSlides: true" - it helped me, but the thing is, I don't need to center the slides.

[ThiGaleno]

@AvdeevaEvgeniya fix this problem like a god, thanks <3

[StPalatinus]

I have this problem too! If I slide to the left, everything seems fine, but when I swipe to the right, the loop doesn`t work. I think the issue reproducible when width of all the slides (not cloned) less than width of "viewport".

I confirm that the problem manifests itself in the specified conditions

[FlambeSk]

Still same problem here

[Enkratia]

Looks like it easier to create new slider from cratch, than find out the solution for swiper.