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>
<div id="caption"></div>
<button id="previous">Previous</button>
<button id="next">Next</button>

CSS

#banner {
    position:relative;
    z-index:0;
}
#previous {border:0;
margin:10px;
    z-index:1;
}
#next {margin:10px;border:0;

    z-index:1;
}
#caption {
    z-index:1;
    background:#DDD;
    height:20px;
    width:340px;
    padding:5px;
    color:#333;
}

JavaScript

$(document).ready(function() {
    
    function onAfter() {
        $('#caption').html(this.title);
    }
    
    $('#banner').cycle({
        fx: 'fade',
        speed: 500,
        timeout: 5000,
        next: '#next',
        prev: '#previous',
        pause: 1,
        after: onAfter
    });

});