Carousel

HTML

<div class="container">
    <h1>By midnight the works were in full operation.</h1>
    <p>"How are we to get to Leatherhead?" she said.</p>

<p>Down the hill I saw a bevy of hussars ride under the railway bridge; three galloped through the open gates of the Oriental College; two others dismounted, and began running from house to house.  The sun, shining through the smoke that drove up from the tops of the trees, seemed blood red, and threw an unfamiliar lurid light upon everything.</p>

<div class="carousel-wrapper">    
<ul class="carousel">
    <li class="item">
        <img src="http://lorempixel.com/g/800/240/sports" alt=""/>
        <p class="text">
            "But can you sing standing on your head, with a top spinning on your left foot, and a sabre balanced on your right?"
        </p>
    </li>
    <li class="item">
        <img src="http://lorempixel.com/g/800/240/food" alt=""/>
        <p class="text">
            'Of course not,' said the Mock Turtle: 'why, if a fish came to ME, and  told me he was going a journey, I should say "With what porpoise?"'
        </p>
    </li>
    <li class="item">
        <img src="http://lorempixel.com/g/800/240/people" alt=""/>
        <p class="text">
            'I want a clean cup,' interrupted the Hatter: 'let's all move one place  on.'
        </p>
    </li>
    <li class="item">
        <img src="http://lorempixel.com/g/800/240/nature" alt=""/>
        <p class="text">
            With oars apeak, and paddles down, the sheets of their sails adrift, the three boats now stilly floated, awaiting Moby Dick's reappearance.
        </p>
    </li>
</ul>
<div class="carousel-nav">
    <a href="" class="prev">&lt;</a>
    <a href="" class="next">&gt;</a>   
</div>
</div>
    <div class="autoplayControl">Toggle autoplay</div>
<p>By midnight the works were in full operation. We were clear from the carcase; sail had been made; the wind was freshening; the wild ocean darkness was intense. But that darkness was licked up by...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400);
.container {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 300;
    width: 800px;
    margin: 10px auto;
}

.container h1 {
    color: #ccc;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 1px 1px 0 #999;
}

.container p {
    margin: 5px 0;
}

.carousel-wrapper {
    position: relative;
    width: 800px;
    height: 240px;
    overflow: hidden;
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    margin: 20px 0;
}

.carousel {
    position: absolute;
}

.carousel li {
    display: block;
    float: left;
    width: 800px;
    height: 240px;
    position: relative;
}

.carousel img {
    position: absolute;
    z-index: 0;
}

.carousel p.text {
    position: absolute;
    z-index: 1;
    font-size: 24px;
    width: 340px;
    right: 80px;
    top: 10px;
    color: #ff6347;
    background-color: #111111;
    background-color: rgba(0,0,0,0.7);
    padding: 5px;
}

.carousel-nav a {
    display: block;
    height: 40px;
    width: 30px;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 800;
    color: #222;
    background-color: rgb(255,99,71);
    background-color: rgba(255,99,71,0.7);
    text-decoration: none;
    padding: 0 4px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    text-align: center;
    z-index: 10;
}

.carousel-nav a.prev {
    left: 0;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.carousel-nav a.next {
    right: 0;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

JavaScript

(function() {
    var autoplay=true;
    var first = $('.item').first(),
        last = $('.item').last(),
        itemWidth = first.width(),
        carousel = $('.carousel');
    carousel.prepend(last.clone()).append(first.clone());
    carousel.width(itemWidth * $('.item').length);
    carousel.css({left: -itemWidth});
    $('.prev').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '+=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left) < 2) {
                carousel.css({left: -itemWidth * (carousel.children().length - 2)});
            }
        });
        return false;       
    });
    $('.next').on('click', function(e){
        e.preventDefault();
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
            if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
                carousel.css({left: -itemWidth});
            }
        });
        return false;       
    });
    
    setInterval(function(){
        if(!autoplay)return;
        carousel.animate({left: '-=' + itemWidth}, 300, function(){
          if(Math.abs(carousel.position().left + itemWidth * (carousel.children().length - 1)) < 2) {
            carousel.css({left: -itemWidth});
          }
        })
    },1000)
    $('.autoplayControl').on('click',function(){
        autoplay=!autoplay;
    })
})();