Simple Customizable jQuery Image Carousel Plugin - pi slider
File Size: | 6.14 KB |
---|---|
Views Total: | 1698 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.