Vue-awesome-swiper: [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

[dw72]

@AndrewBogdanovTSS this is my current slider:

<swiper v-if="slides.length" :options="options">
  <swiper-slide v-for="(slide, idx) in slides" :key="idx">
    <a
      v-if="slide.url"
      :href="slide.url"
      target="_blank"
      rel="nofollow noreferrer noopener"
      tabindex="-1"
    >
      <img :data-src="slide.img" :alt="slide.alt" class="swiper-lazy">
    </a>
    <img v-else :data-src="slide.img" :alt="slide.alt" class="swiper-lazy">
    <div class="swiper-lazy-preloader"/>
  </swiper-slide>
  <div slot="pagination" class="swiper-pagination"/>
  <div slot="button-prev" class="swiper-button swiper-button-prev"/>
  <div slot="button-next" class="swiper-button swiper-button-next"/>
</swiper>

and options:

options: {
  // http://idangero.us/swiper/api/
  autoplay: { delay: 5000 },
  keyboard: { enabled: true },
  loop: {
    loopedSlides: 1
  },
  preloadImages: false,
  lazy: {
    loadPrevNext: true,
    loadOnTransitionStart: 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,
  watchSlidesVisibility: true
}

These works ok for me with [email protected] :)

[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)

[abdessamadelhamdany]

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

[abdessamadelhamdany]

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;
    });
},