jQuery Slider Evolution

Documentation

By aeroalquimia

Source Code

HTML

<div class="slider">
  <div>
    <div class="caption">
      <h4>First Slide</h4>
    </div>
    <img src="assets/slide_6.jpg" alt=""/>
  </div>
  
  <div>
    <div class="caption">
      <h4>Second Slide</h4>
    </div>
    <img src="assets/slide_9.jpg" alt=""/>
  </div>
  
  <div>
    <div class="caption">
      <h4>Third Slide</h4>
    </div>
    <img src="assets/slide_7.jpg" alt=""/>
  </div>
  
  <div>
    <div class="caption">
      <h4>Fourth Slide</h4>
    </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);
  });
});