Basic Cross-fading Image Carousel/Slideshow with Vanilla JavaScript – Cycle.js

Preview:

Description:

Cycle.js is a pure vanilla JavaScript library which enables you to infinitely cycle through a list of images with a crossfade effect.

How to use it:

Load the cycle.js script in your document.

<script src="path/to/image-cycle.js"></script>

Insert a list of images into your document and use data-* attribute to set the options for each instance.

<ul class="image-cycle" 
    data-target="li" 
    data-interval="2500" 
    data-width="300" 
    data-speed="1000">
  <li class="active" ><img src="1.jpg"/></li>
  <li><img src="2.jpg" /></li>
  <li><img src="3.jpg" /></li>
</ul>

Initialize the image carousel/slideshow.

var ex1 = new Cycle('.image-cycle');

Changelog:

03/24/2016

• Update