Multi-purpose JavaScript Slideshow Library – Slideshow.js

Preview:

Description:

Slideshow.js is a simple yet multi-functional JavaScript library for creating a looping (or non-looping) slideshow which supports both images and mixed html content.

How to use it:

Add references to slideshow.css and slideshow.js to your webpage.

<link rel="stylesheet" href="slideshow.css">
<script src="slideshow.js"></script>

Add images together with next / prev navigation and counter to the webpage.

<section class="slideshow-images js-slideshow-images">
  <nav>
      <button class="slideshow-nav slideshow-nav--prev js-slideshow-previous"></button>
      <button class="slideshow-nav slideshow-nav--next js-slideshow-next"></button>
  </nav>
  <div class="slideshow-container js-slideshow-container">
      <div class="slideshow-slide js-slideshow-slide">
          <img class="slideshow-slide--image" src="1.jpeg"/>
      </div>
      <div class="slideshow-slide js-slideshow-slide">
          <img class="slideshow-slide--image" src="2.jpeg"/>
      </div>
      <div class="slideshow-slide js-slideshow-slide">
          <img class="slideshow-slide--image" src="3.jpeg"/>
      </div>
  </div>
  <aside>
      <div class="slideshow-counter js-slideshow-counter"></div>
  </aside>
</section>

Initialize the slideshow.

var slideshowImages = Slideshow(); 
slideshowImages.init('.js-slideshow-images', true);

Disable the infinite looping.

var slideshowImages = Slideshow(); 
slideshowImages.init('.js-slideshow-images', false);