[Bug] Swiper is not looping correctly

AndrewBogdanovTSS commented 6 years ago

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 commented 6 years ago

@AndrewBogdanovTSS the same problem but my settings looks like this

swiperOption: {
                    loop: true,
                    slidesPerView: 1
}

and looping does not working in both direction

dw72 commented 5 years ago

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 commented 5 years ago

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

AndrewBogdanovTSS commented 5 years ago

@dw72 didn't help in my case

achimoraites commented 5 years ago

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 commented 5 years ago

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

dw72 commented 5 years ago

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

achimoraites commented 5 years ago

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

ptucky commented 5 years ago

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

Thank for this solution

StijnKlarenbeek commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

MrToxy commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

this.initHeroSwiper()

Please, what is inside in this function of yours?

Thanks

abdessamadely commented 4 years ago

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 commented 3 years ago

Added this to the swiperOptions and it is working.

slidesPerGroup: 1

AvdeevaEvgeniya commented 3 years ago

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 commented 3 years ago

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

ThiGaleno commented 2 years ago

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

StPalatinus commented 2 years ago

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 commented 1 year ago

Still same problem here

Enkratia commented 1 year ago

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

surmon-china / vue-awesome-swiper