使用 js 或 css 或两者使滑块自动滚动图像

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

所以像这样的功能可以工作，它可能需要一些调整。

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

使用 js 或 css 或两者使滑块自动滚动图像

Make Slider autoscroll images automatically with js or css or both

javascript

css

ratchet