Question

使用idangero api创建了一个滑块/滑动器。当我将自动播放设置为滑块时，滑块会立即跳到幻灯片2，然后再次跳到幻灯片1，继续跳到幻灯片3。

我尝试将setInitialSlide：0包括在内，但没有任何区别。

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>

我希望滑块从第一张幻灯片自动播放，并且在最后一张幻灯片之后，滑块应继续从第一张幻灯片循环播放。

Answer 1

尝试使用此方法，希望对您有帮助

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

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

自动播放时可以使用initialSlide设置第一张幻灯片

将滑块/滑动器设置为从第一张幻灯片自动播放

3 个答案: