jQuery Cycle Demo

Basic demo that shows a Previous/Next button and a caption.

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<div id="banner">
  <img src="http://placehold.it/350x150" alt="Image A" title="This is Image A"
  />
  <img src="http://placehold.it/350x150" alt="Image B" title="This is Image B"
  />
  <img src="http://placehold.it/350x150" alt="Image C" title="This is Image C"
  />
  <img src="http://placehold.it/350x150" alt="Image D" title="This is Image D"
  />
  <img src="http://placehold.it/350x150" alt="Image E" title="This is Image E"
  />
</div>

CSS

#banner {
  position:relative;
  z-index:0;
}
#previous {
  position:relative;
  z-index:1;
  top:-85px;
  left:-15px;
}
#next {
  position:relative;
  z-index:1;
  top:-85px;
  right:-250px;
}
#slides-nav {
  position:relative;
  z-index:1;
  top:-50px;
  background:#DDD;
  height:20px;
  width:340px;
  padding:5px;
  color:#333;
}
.activeSlide{
 color:#00ff00; 
}
}

JavaScript

$(document).ready(function () {

  $('#banner').after('<div id="slides-nav" class="pagination">').cycle({
    fx: 'scrollLeft',
    pause: true,
    pager: '#slides-nav',
    speed: 500,
    timeout: 500,
    autostop: true,
    end: function (options) {
      $('#banner').cycle('resume').cycle('0').cycle('stop', 2);
    }

  });

});