Background slider avec boutons [jquery]

Similaire au Tetras mais avec des boutons sélecteurs et un code JS plus complexe.

by Jean-Baptiste Audras

HTML

<div class="header--slider">
    <div class="buttonlist">
        <a class="button button-hover" id="slideTo0" data-current="0"></a>
        <a class="button" id="slideTo1" data-current="1"></a>
        <a class="button" id="slideTo2" data-current="2"></a>
    </div>
    <div class="slide"></div>
</div>

CSS

.header--slider {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
.slide {
    position: absolute;
    width: 100%;
    height: 300px;
    background-position: top center;
    background-image: url(http://placekitten.com/1100/300);
    z-index: 0;
}
.buttonlist {
    position: absolute;
    bottom: 20px;
    display: block;
    width: 100px;
    z-index: 10;
}
.button {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 10px;
    z-index: 10;
    display : inline-block;
    cursor: pointer;
    margin-left: 10px;
}
.button-hover {
    background: #555;
}

JavaScript

var currentBackground = 0;
var timer;
var backgrounds = [];
var hoverClass;

backgrounds[0] = 'http://placekitten.com/1100/300';
backgrounds[1] = 'http://placekitten.com/1000/300';
backgrounds[2] = 'http://placekitten.com/1200/300';

function changeBackground() {
    currentBackground++;
    if(currentBackground > 2) currentBackground = 0;
    $('.slide').fadeOut(1000,function() {
        $('.slide').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('.slide').fadeIn(1000);
        $('.button').removeClass('button-hover');
        $('[data-current='+currentBackground+']').addClass('button-hover');
    });
    timer = setTimeout(changeBackground, 5000);
}

$(document).ready(function() {
    timer = setTimeout(changeBackground, 5000);  
}); 

$(document).ready(function() {
    $('#slideTo0').click(function(event){
        event.preventDefault();
        clearTimeout(timer);
        currentBackground = 0;
        $('.slide').fadeOut(1000,function() {
            $('.slide').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
            });
            $('.slide').fadeIn(1000);
            $('.button').removeClass('button-hover');
            $('[data-current='+currentBackground+']').addClass('button-hover');
        });
        timer = setTimeout(changeBackground, 5000);
    });
    $('#slideTo1').click(function(event){
        event.preventDefault();
        clearTimeout(timer);
        currentBackground = 1;
        $('.slide').fadeOut(1000,function() {
            $('.slide').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
            });
            $('.slide').fadeIn(1000);
            $('.button').removeClass('button-hover');
            $('[data-current='+currentBackground+']').addClass('button-hover');
        });
        timer = setTimeout(changeBackground, 5000);
    });
    $('#slideTo2').click(function(event){
       ...