jimdash-slider

js snippet to fade slides

Usage

Use npm and module bundler like Webpack to use it or download the JS file and add it to your project as a script tag.

Use this html snippet to run the slider:

<div class="slides jimdash-slider">
  <div class="slide slide--one" data-duration-time="4000"></div>
  <div class="slide slide--two" data-duration-time="4000"></div>
  <div class="slide slide--three"></div>
</div>

Notes

• Only the class jimdash-slider is needed for the JS. Everything around can be written with your preferences ;)

• the slider will add the class jimdash-slider__slide--active to the active slide.

• it provides classes to adjust the transition time. Just add the class to the main container, for example:

  <div class="slides jimdash-slider jimdash-slider--transition-time-1000">
    ...
  </div>

  Possible classes:

  • jimdash-slider--transition-time-1000
  • jimdash-slider--transition-time-1500
  • jimdash-slider--transition-time-2000
  • jimdash-slider--transition-time-2500

• every active slide dispatch an event called jimdashSliderActiveSlide