Clean and Responsive jQuery Slideshow Plugin - Excolo Slider

File Size: 1.48 MB
Views Total: 2640
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Clean and Responsive jQuery Slideshow Plugin - Excolo Slider

Excolo Slider is an extremely simple jQuery plugin for creating a neat and responsive content slideshow on your website. It supports auto-play, keyboard & touch navigation, CSS3 transitions, and slide delay.

Basic Usage:

1. Include jQuery library and Excolo Slider on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.excoloSlider.min.js"></script>

2. Create the markup for your image slideshow

<div id="demo"> 
<img src="images/image1.jpg" alt="" /> 
<img src="images/image2.jpg" alt="" /> 
<img src="images/image3.jpg" alt="" /> 
...
</div>

3. Call the plugin

<script>
$(function () {
$(function () {
    $("#sliderA").excoloSlider();
});
});
</script>

4. Options

width: 800, 
height: 530,  
autoSize: true,
keyboardNav: true, // keyboard navigation
touchNav: true, // touch navigation
startSlide: 1, // the first slide
autoPlay: true, // autoplay slideshow
delay: 0, 
interval: 3000,
repeat: true,
playReverse: false,
hoverPause: true, // stop on mouse over
animationCssTransitions: true, // css3 transitions
animationDuration: 500,
animationTimingFunction: "linear",
activeSlideClass: "es-active"

Change Log:

v1.1.0 (2014-05-16)

v1.0.0 (2013-06-15)

  • added the last feature (pagination) and fixed stuffs

v0.4.0 (2013-06-10)

  • added HTML5 data-attribute captions

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