Flexible and Simple jQuery Slidshow Plugin - Choco Slider

Choco Slider is a super simple and fast jQuery plugin for creating a customizable image slideshow which is compatible with all browsers today.

Features:

• Lightweight and easy-to-use
• Auto play & pause
• 3 transition effects: random, slide and fade
• Dots navigation
• Callback events supported
• Auto generates image captions using title attribute
• Cross-browser: IE6+, Chrome, Firefox, Safari, Opera, etc.

Basic Usage:

1. Include jQuery library and jQuery Choco Slider plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.chocoslider.js" type="text/javascript"></script>

2. Create the html. The plugin will use your image's title attribute to automatically generate the image captions

<div id="slider"> 
<a href="#"><img src="img/img_1.jpg" alt="Foto 1" title="Descrition 1"></a> 
<a href="#"><img src="img/img_2.jpg" alt="Foto 2" title="Descrition 2"></a> 
<a href="#"><img src="img/img_3.jpg" alt="Foto 3" title="Descrition 3"></a> 
<a href="#"><img src="img/img_4.jpg" alt="Foto 4" title="Descrition 4"></a> 
<a href="#"><img src="img/img_5.jpg" alt="Foto 5" title="Descrition 5"></a> 
...
</div>

3. The CSS for the slider

#slider {
height: 200px;
width: 560px;
}
.chocoslider {
position: relative;
margin-bottom: 50px;
}
.chocoslider img {
position: absolute;
top: 0px;
left: 0px;
}
.chocoslider a.choco-imageLink {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
z-index: 60;
display: none;
}
.choco-slice {
display: block;
position: absolute;
z-index: 50;
height: 100%;
}
.choco-title {
position: absolute;
left: 0px;
bottom: 0px;
background: #000;
color: #fff;
opacity: 0.8;
width: 100%;
z-index: 89;
}
.choco-title p {
padding: 5px;
margin: 0;
}
.choco-title a {
display: inline !important;
}
.choco-html-title {
display: none;
}
.choco-controlNavigation {
position: absolute;
right: 0%;
bottom: -30px;
}
.choco-controlNavigation a {
text-indent: -999999px;
text-transform: uppercase;
text-decoration: none;
height: 20px;
width: 18px;
display: block;
cursor: pointer;
background: transparent url(img/controlls.gif) center bottom no-repeat;
float: left;
outline: none;
}
.choco-controlNavigation a.active {
background: transparent url(img/controlls.gif) center top no-repeat;
}

4. Call the plugin with options

<script type="text/javascript">
$(window).load(function() {
$('#slider').chocoslider({
auto:true, // automatic slider
autoPause:true, // auto pause on clicking
speedStrip:500, // Speed between the strips
effect:'random', // 'slide', 'fade' and 'random'
numberStrips:15, // number of strips to show
sliderDelay:3000, // time delay between images transition
transparencytitle:0.8, // Transparency of the title
bChange: function(){},
aChange: function(){},
chocoEnd: function(){},
controlNavigation:true //  show the dots navigations
});
});
</script>

---

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