Automatic Image Rotator with Pure JavaScript – Circle

Preview:

Description:

Cycle is a dependency-free javascript plugin for cycling through a list of images with a crossfade effect.

How to use it:

Load the circle.js vanilla JavaScript library in your document.

<script src="src/cycle.js"></script>

Insert a list of images into the document and pass the options via Html5 data-* attributes.

<ul class="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 rotator.

var cycle = new Cycle('selector');
// or
new Cycle('selector');

All possible options with default values.

var cycle = new Cycle('selector',{
    autoRun: true,
    pauseOnHover: true,
    selector: '.cycle',
    target: 'li',
    interval: '2500',
    width: '300',
    speed: '1000',
    captionPosition: 'bottom',
    captionColor: '#333',
    captionBgColor: 'rgba(255, 255, 255, 0.75)'
});

Changelog:

07/20/2018

• wrap in IIFE and minify for dist, update example to use minified version from dist folder