/jQuery-Image-Rotator-Plugin

jQuery Image Rotator Plugin with preview on Next and Prev buttons

Primary LanguageJavaScript

#jQuery Image Rotator Plugin

Query Image Rotator v1.0.0

Very configuralable Image Rotator plugin with preview on Next and Prev button. Simply set your Image folder and an Array of your images in the config options. Image Rotator

by Kai Hotz Kai Hotz

How to Use:

1. Load jQuery and include Image Rotator Plugin files

To use Image Rotator Plugin, you’ll need to make sure both the Image Rotator Plugin and jQuery 1.9 or higher scripts are included.

<!-- Important Image Rotator Plugin stylesheet -->
<link rel="stylesheet" href="css/jquery_imageRotator.css">

<!--  jQuery 1.9+  -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Include js plugin -->
<script src="js/jquery_imageRotator.js"></script>

2. Call the plugin

Now call the Image Rotator initializer function on the desiered element and your Image Rotator is ready.

jQuery(document).ready(function($){

   $('#yourcontainer').imageRotator();

});

Customizing

1. Options

All of the options below are available to customize Image Rotator Plugin.

Variable Default Type Description
speed 500 int Speed for animation on on Image Change
imageFolder 'images' string Image Folder
images ['img1.jpg','img2.jpg','img3.jpg','img4.jpg'] Array Array with the names of your images
prevButton 'Previous' string Prev Button Text
nextButton 'Next' string Next Button Text

2. Defaults

Image Rotator Plugin default settings

$('#yourcontainer').imageRotator({
    'speed'      : 500,
    'imageFolder': 'images',
    'images'     : ['img1.jpg','img2.jpg','img3.jpg','img4.jpg'],
    'prevButton' : 'Previous',
    'nextButton' : 'Next',
});