Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Swiper is not looping correctly

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:21

Top GitHub Comments

7reactions

dw72commented, Jan 13, 2019

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

6reactions

achimoraitescommented, May 7, 2019

these settings worked for me 👍

      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.