CODEWITHSUNDEEP
javascriptsliderswiper.jsidangero
Tane
Tane

Reputation: 491

Set slider/swiper to autoplay from 1st slide

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.

Upvotes: 1

Views: 18689

Answers (4)

Raghav Tripathi
Raghav Tripathi

Reputation: 1

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

Upvotes: 0

hamed.nosrati
hamed.nosrati

Reputation: 238

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

Upvotes: 2

Rafiq
Rafiq

Reputation: 11445

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

Upvotes: 1

Jun Cain
Jun Cain

Reputation: 85

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

Upvotes: 2

Related Questions