jimdash-slider

js snippet for fading slides

Usage no npm install needed!

<script type="module">
  import jimdashSlider from 'https://cdn.skypack.dev/jimdash-slider';
</script>

README

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