Slide.js ready

http://slidesjs.com/

by Can

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://slidesjs.com/examples/standard/js/slides.min.jquery.js"></script>
<div id="example">
            <img src="http://slidesjs.com/examples/standard/img/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
            <div id="slides">
                <div class="slides_container">
                    <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-1.jpg" width="570" height="270" alt="Slide 1"></a>
                     <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-2.jpg" width="570" height="270" alt="Slide 1"></a>
                     <a href="http://www.flickr.com/photos/jliba/4665625073/" title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!" target="_blank"><img src="http://slidesjs.com/examples/standard/img/slide-3.jpg" width="570" height="270" alt="Slide 1"></a>
                    
                </div>
                <a href="#" class="prev"><img src="http://slidesjs.com/examples/standard/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                <a href="#" class="next"><img src="http://slidesjs.com/examples/standard/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
            </div>
            <img src="http://slidesjs.com/examples/standard/img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
        </div>

CSS

/*
    Page style
*/

body { 
    font:normal 62.5%/1.5 Helvetica, Arial, sans-serif;
    letter-spacing:0;
    color:#434343;
    background:#efefef url(http://slidesjs.com/examples/standard/img/background.png) repeat top center;
    padding:20px 0;
    position:relative;
    text-shadow:0 1px 0 rgba(255,255,255,.8);
    -webkit-font-smoothing: subpixel-antialiased;
}

#container {
    width:580px;
    padding:10px;
    margin:0 auto;
    position:relative;
    z-index:0;
}

#example {
    width:600px;
    height:350px;
    position:relative;
     margin:0 auto;
}

#ribbon {
    position:absolute;
    top:-3px;
    left:-15px;
    z-index:500;
}

#frame {
    position:absolute;
    z-index:0;
    width:739px;
    height:341px;
    top:-3px;
    left:-80px;
}

/*
    Slideshow
*/

#slides {
    position:absolute;
    top:15px;
    left:4px;
    z-index:100;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

.slides_container {
    width:570px;
    height:270px;
    overflow:hidden;
    position:relative;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width:570px;
    height:270px;
    display:block;
}

/*
    Next/prev buttons
*/

#slides .next,#slides .prev {
    position:absolute;
    top:107px;
    left:-39px;
    width:24px;
    height:43px;
    display:block;
    z-index:101;
}

#slides .next {
    left:585px;
}

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(http://slidesjs.com/examples/standard/img/pagination.png);
    background-position:0 0;
    float:left;
   ...

JavaScript

$(function(){
    $('#slides').slides({
        preload: true,
        preloadImage: 'img/loading.gif',
        play: 5000,
        pause: 2500                
    });
});