jQuery Slider Evolution
Documentation
By aeroalquimia
First Slide
Second Slide
Third Slide
Fourth Slide
Source Code
HTML
<div class="slider">
<div>
<img src="assets/slide_6.jpg" alt=""/>
</div>
<div>
<img src="assets/slide_9.jpg" alt=""/>
</div>
<div>
<img src="assets/slide_7.jpg" alt=""/>
</div>
<div>
<img src="assets/slide_3.jpg" alt=""/>
</div>
</div>
CSS
.caption
{
display:none;
}
Javascript
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 325,
pauseOnHover : false,
transition : ['slideLeft', 'slideRight', 'slideTop', 'slideBottom']
});
$(".caption").fadeIn(500);
// playing with events:
$(".slider").bind("sliderChange", function(event, curSlide) {
$(curSlide).children(".caption").hide();
});
$(".slider").bind("sliderTransitionFinishes", function(event, curSlide) {
$(curSlide).children(".caption").fadeIn(500);
});
});