jQuery Cycle Demo

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

by Alen Doe

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>
<script src="http://jquery.malsup.com/cycle2/jquery.cycle2.js"></script>

<div id="slider">
    <img src="http://i46.tinypic.com/29oocgm.jpg" />
    <img src="http://i48.tinypic.com/o602sz.jpg" />
    <img src="http://i50.tinypic.com/qntoxc.jpg" />
</div>

CSS

#slider {
    position:relative;
}

#slider img {
    width:100%;
    display:block;
}

JavaScript

$(document).ready(function() {
    
    $('#slider').cycle({
        fx:     'fade',
        rev: 1,
    });

});