使用 js 或 css 或兩者自動使 Slider 自動滾動圖像

Question

我正在使用 Ratchet css 的 Slider，據我所知，它對自動滾動沒有任何作用。 這是代碼：

<div class="slider" id="mySlider">
  <div class="slide-group">
    <div class="slide">
      <img src="/assets/img/slide-1.jpg">
      <span class="slide-text">
        <span class="icon icon-left-nav"></span>
        Slide me
      </span>
    </div>
    <div class="slide">
      <img src="/assets/img/slide-2.jpg">
    </div>
    <div class="slide">
      <img src="/assets/img/slide-3.jpg">
    </div>
  </div>
</div>

我需要做的是使用 js 或 css 或兩者都讓圖像每隔幾秒滾動一次。

我怎樣才能做到這一點？

Answer 1

查看 sliders.js 它基於

https://github.com/thebird/Swipe

所以像這樣的 function 可以工作，它可能需要一些調整。

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});