Simple jQuery Image Rotator On Mouse Hover - Images rotation

Images Rotation is a simple image rotator plugin for jQuery that automatically rotates an array of images at a specified speed when hovers over an image container.

See also:

• Simple Image Rotator jQuery Plugin - Banner Rotator
• Simple jQuery Image Rotator Plugin - imageRotator

Basic Usage:

1. Create a container with data-images attribute which contains an array with urls to images.

<div class="demo" data-images='["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]'> 
<img src="img/1.jpg" alt=""> 
</div>

2. Load the jQuery library and jQuery image rotation plugin in the footer of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.images-rotation.min.js"></script> 

3. Call the plugin and you're done.

<script>
$('.demo').imagesRotation();
</script> 

4. All the options.

<script>
$('.demo').imagesRotation({
images: [],         // urls to images
dataAttr: 'images', // html5 data- attribute which contains an array with urls to images
imgSelector: 'img', // element to change
interval: 1000,     // ms
intervalFirst: 500, // first image change, ms
callback: null      // first argument would be the current image url});
</script> 

Change log:

2014-08-12

• Added background-image support

---

This awesome jQuery plugin is developed by sladex. For more Advanced Usages, please check the demo page or visit the official website.