Search code examples
javascriptcssratchet

Make Slider autoscroll images automatically with js or css or both

I am using the Slider from Ratchet css, which as far as I know does nothing as far as auto scrolling goes. Here is the code:

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

What I need to do is either with js or css or both have the images scrolling every few seconds.

How can I do this?

Solution

  • Looking into the sliders.js it is based off

    https://github.com/thebird/Swipe

    So a function like this could work, it might need some tweaking.

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