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

【问题标题】：Set slider/swiper to autoplay from 1st slide将滑块/滑动条设置为从第一张幻灯片自动播放
【发布时间】：2019-05-28 07:50:13
【问题描述】：

使用 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>

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

【问题讨论】：

标签： javascript slider swiper idangero

【解决方案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,
    },
});

【讨论】：

感谢您的回答。虽然我已经找到了解决方案。当我设置 slidesPerView 时它有所帮助。

【解决方案2】：

截至从文档发布此答案日期时自动播放和循环的最新配置：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：