Set slider/swiper to autoplay from 1st slide

Question

Created a slider/swiper with idangero api. When I set the autoplay to the slider, the slider immediately jumps to slide 2, then again to slide 1, continuing to slide 3.

I tried to include setInitialSlide: 0, but it didn't make any difference.

 var mySwiper = new Swiper('.swiper-container', { speed: 500, loop: true, setInitialSlide: 0, spaceBetween: 0, }); var mySwiper = document.querySelector('.swiper-container').swiper mySwiper.slideNext(); var mySwiper = new Swiper('.swiper-container', { autoplay: { delay: 1000, }, });

 .swiper-container { width: 200px; height: 200px; position: absolute; }.swiper-slide { width: 200px; height: 200px; background: lightblue; }

 <div class="swiper"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> </div>

I would like the slider to autoplay from the 1st slide, and after the last slide slider should continue looping from the 1st slide.

Answer 1

Try to used this I hope it will help you

var swiper = new Swiper('.swiper-container', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    loop: true,
    coverflowEffect: {
        rotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows: true,
    },
    autoplay: {
        delay: 2000,
    },
});

Answer 2

Latest config for auto play and loop as of posting this answer date from doc:

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      centeredSlides: true,
      spaceBetween: 30,
      loop:true,
      loopedSlides:1,
      autoplay: {
        delay: 1000,
        disableOnInteraction: false
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      virtual: {
        slides: (function () {
          var slides = [];
          for (var i = 0; i < 6; i += 1) {
            slides.push('Slide ' + (i + 1));
          }
          return slides;
        }()),
      },
    });

Answer 3

const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  initialSlide : 1,
  autoplay: {
    delay: 5000,
    disableOnInteraction: false,
    reverseDirection: true,
  }
});

you can use initialSlide to set first slide when use autoplay

Answer 4

  const swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  initialSlide : 1,
  autoplay: {
    delay: 2000,
    disableOnInteraction: true,
    reverseDirection: false,
  }
});