[Js] [jQuery] [Pour Olivier] Un carousel qui utilise des <ul> comme diapositives au lieu des <li>

by Jean-Baptiste Audras

HTML

<h1>Un Carousel avec des listes d'images</h1>
<p>(voir notes dans la partie Js)</p>
<button id="prec">Précédent</button>
<button id="suiv">Suivant</button>
<div id="carousel">
    <ul class="panneau">
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
    </ul>
    <ul class="panneau">
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
    </ul>
    <ul class="panneau">
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
        <li><img src="http://placekitten.com/90/90"></li>
    </ul>
</div>

CSS

h1 {font-size:20px;margin: 10px;}
div#carousel{
    width: 270px;
    height: 170px;
    margin: 30px;
    padding: 10px;
    background: #fcc;
    overflow: hidden;
    position: relative;
}
ul.panneau {
    position: absolute;
}
ul.panneau li{
    padding: 0 5px 5px 0;
    float: left;
}

JavaScript

/**
* NB : ici j'utilises un script maison pour gérer mon carousel
* il n'est pas forcément super optimisé (un même un poil buggy) 
* mais ça m'évite de charger un plugin de + sur jsFiddle…
* En utilisant jCarousel Lite ou autre ça fonctionne pareil : il
* suffit de modifier légément pour que ce soit pas les <li> qui
* défilent mais les <ul> !

* J'ai pas mis l'effet lightbox mais bon ça c'est facile…
*/
    var Carousel = {};  
    Carousel.current = 0;  
    //contient le nombre de slides  
    Carousel.num = 0;  
      
    /** 
       * initialise le Carousel :  
       * place les slides (ul.panneau)
       *  attache les événements (clics boutons) 
       */  
    initCarousel = function(){  
        // on place les éléments de liste  
        $(".panneau").each(function(i){  
            Carousel.num++;  
            var _leftPX = (i)*900;  
            $(this).css('left',_leftPX+'px');  
            $(this).css('top','0px');  
            $(this).show();  
        });  
        //(ajuste le total de slides)  
        Carousel.num--;  
        //attache les évéments  
        $("#prec").click(precCarousel);  
        $("#suiv").click(suivCarousel);  
    }  
    /** 
       * affiche la diapo suivante 
       */  
    suivCarousel = function(){  
        //calcul du prochain index (si max, on revient au début)  
        var _next = (Carousel.current+1>Carousel.num)? 0 : Carousel.current+1;  
        moveCarousel(_next);  
        return false;  
    }  
    /** 
       * affiche la diapo précédente 
       */  
    precCarousel = function(){  
        //calcul du prochain index (si min, on va à la fin)  
        var _next = (Carousel.current-1<0)? Carousel.num : Carousel.current-1;  
        moveCarousel(_next);  
        return false;  
    }  
    /** 
       * affiche la diapo dont l'index est passé en paramètre 
       */  
    moveCarousel = function(index)  
    {  
        //replace les li en les animant  
        $(".panneau").each(function(i){  
 ...