This is a port of jQuery Orbit http://www.zurb.com/playground/orbit-jquery-image-slider
<script type="text/javascript">
window.addEvent("domready", function() {
$('#featured').spin();
});
</script>
<script type="text/javascript">
window.addEvent("domready", function() {
$('#featured').spin({
transition: "horizontal-push",//fade, horizontal-slide, vertical-slide, horizontal-push
transitionOption: {transition:"linear",duration:600},
timer: true,// true or false to have the timer
advanceSpeed: 4000,// if timer is enabled, time between transitions
pauseOnHover: false,// if you hover pauses the slider
startClockOnMouseOut: true,// if clock should start on MouseOut
startClockOnMouseOutAfter: 1000,// how long after MouseOut should the timer start again
directionalNav: true,// manual advancing directional navs
captions: true,// do you want captions?
captionTransition: "fade",//fade, slideOpenH , slideOpenV, followSlide,none
captionTransitionOption: {transition:"linear",duration:600},// fade, slideOpen, none
bullets: true,// true or false to activate the bullet navigation
bulletThumbs: false,// thumbnails for the bullets
bulletThumbLocation: '',// location from this file where thumbs will be
afterSlideChange: function(){}// empty function
});
});
</script>
<div id="featured">
<div class="content" style="" rel="Caption 1">
<h1>Orbit does content now.</h1>
<h3>Highlight me...I'm text.</h3>
</div>
<a href=""><img src="dummy-images/overflow.jpg" rel="Caption 2" /></a>
<img src="dummy-images/captions.jpg" rel="Caption 3" />
<img src="dummy-images/features.jpg" />
</div>