Simple Customizable jQuery Image Carousel Plugin - pi slider

pi slider is a simple, fresh and highly customizable jQuery image carousel/slideshow plugin which supports animated caption, progress bar, image loader, auto-rotation, and much more.

How to use it:

1. Include jQuery library together with the jQuery pi slider plugin's JS and CSS in the document.

<link href="pi-slider.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="pi-slider.js"></script>

2. Insert the images into a container element as follows.

<div id="slider">
  <img src="1.jpg" title="Caption here (optional)" data-href="Link here (optional)" />
  <img src="2.jpg" title="Caption here (optional)" data-href="Link here (optional)" />
  <img src="3.jpg" title="Caption here (optional)" data-href="Link here (optional)" />
</div>

3. Initialize the plugin to enable the image carousel.

$(document).ready(function() {
$("#slider").piSlider();
});

4. Available options.

$(document).ready(function() {
$("#slider").piSlider({
// displays a loading graphic before the slider fades in {true, false}
loader: true, 
// start image {number_of_image}
startImage: 1,
// autoplay or manual slides with arrows {true, false}
autoplay: true,
// continuous play of slides {true, false}
loop: true,
// play direction {true, false}
backwards: false,
// which effect to blend content {fade, slide}
effect: 'fade',
// duration of  each slide {time_in_ms}
duration: '8000',
// enables keystrokes for controlling the slider (left arrow, right arrow & space) {true, false}
keyControlling: true,
// pause on hover {true, false}
pauseOnHover: false,
// displays a shadow below the slider {true, false}
shadow: true,
// enables/disables fullsize view of the slider {true, false}
fullsize: false,
// sets progressbar color {color_word, hex_code}
progressColor: 'grey',
// shows/hides the progressbar {true, false}
progressBar: true,
// sets the position of the progressbar {top, bottom}
progressPosition: 'bottom',
// shows/hides control arrows {true, false}
arrows: true,
// shows/hides captions {true, false}
captions: true
});
});

Change logs:

2015-01-26

• bugfixes & code-beautify

2015-01-07

• Update pi-slider.min.css

2015-01-06

• Update pi-slider.min.js

2014-08-31

• Adding feature for keystroke controlling

---

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