Il existe de nombreux plugins jQuery pour intégrer des sliders directement sur son site. Ils peuvent parfois êtes lourds et ne pas répondre tout à fait à nos besoins. Il peut donc être intéressant de développer son propre slider à l'aide de jQuery et ainsi mieux comprendre son fonctionnement.

Démonstration

Ce codepen vous montrera le fonctionnement du slider, cliquez sur l'image pour voir l'animation : Voir la démo.

Le code HTML

Le code HTML est assez simple. On dispose d'un slider, puis d'une div intermédiaire (c'est elle qui sera animée) et enfin les différents slides. Leur contenu peut être n'importe quel code HTML (images, texte, vidéo...).

<div class="slider">
    <div class="slider-content">
        <div class="slide"><img src=""></div>
        <div class="slide">Un 2ème slide avec du texte</div>
        <div class="slide">3ème slide avec du texte</div>
    </div>
</div>

Base HTML pour la création du slider

Le code CSS

Le principe du slider va consister à donner une largeur déterminée à la div .slider et lui appliquer un overflow: hidden pour cacher tout ce qui en sort. La largeur de .slider-content sera égale à la largeur du slider multipliée par le nombre de slides. Ces derniers seront en float: left, permettant ainsi de les faire défiler.

.slider {
    width: 627px;
    overflow: hidden;
}
.slider-content {
    width: 2508px; /* 627px * 4 */
}
.slide {
    float: left;
    width: 627px;
}

Code CSS de base pour le slider

Dans ce cas, le slider fait 627px de large et comporte 4 slides.

Le code jQuery

Avec jQuery, nous allons réaliser l'animation et le changement de slides. Pour cela, nous allons affecter une classe active au slide actuellement affiché. Puis, nous utiliserons les fonctions next() de jQuery pour changer le slide en cours.

$(document).ready(function() {

    var slider = $('.slider');
    var slider_content = slider.children('.slider-content');

    // Changement de slide au click sur le slider
    slider.on('click', function(e) {
        slide();
    });

    // Fonction pour changer de slider
    function slide() {

        // On récupère le slide actuellement affiché
        var current_slide = slider_content.children('.slide.active');
        if (!current_slide.length) {
            // Si aucun slide n'a de classe active, on prend le premier par défaut
            current_slide = slider_content.children('.slide:first');
        }

        // On définit le nouveau slide à afficher
        var new_slide = slider_content.next();

        // On anime le slide pour afficher le nouveau
        slider_content.animate({ left: -new_slide.position().left }, 250, function() {
            current_slide.removeClass('active'); // On retire la classe active à l'ancien slide
            new_slide.addClass('active'); // On ajoute la classe active au nouveau slide
        });

    }

});

Code jQuery pour animer le slider

Fonctionnement

Le code n'est vraiment pas complexe. A chaque fois que l'on veut changer de slide, la logique est la suivante :

  1. On récupère le slide courant
  2. On en déduit le slide suivant
  3. On execute l'animation de changement de slide
  4. On rédéfinit le slide actif

Il est à noter que ce ne sont pas réellement les slides qui bougent, juste le parent. Effectivement, on lui définit une valeur left en fonction de la position du slide que l'on souhaite afficher. L'avantage de cette technique, c'est que les slides peuvent avoir une largeur différentes, le code fonctionnera toujours.

Optimisation

Ce code est tout à fait fonctionnel, mais il n'est pas du tout optimisé. Effectivement, nous animons la propriété left de la div .slider-content. Il faut éviter ceci. Afin d'optimiser les performances, il est préférable de modifier la proprité transform avec translateX. Le plugin jQuery transit.js est excellent pour cela. L'animation sera plus fluide et consommera moins de ressources.

Aller plus loin

Pour aller plus loin, il est bien entendu possible d'améliorer la fonction slide, voici ce qui pourrait être développé :

  • Ajouter un paramètre pour définir la direction next ou prev.
  • Ajouter un paramètre pour définir l'index du slide que l'on souhaite afficher.
  • Modifier l'animation pour la rendre plus jolie.
  • Ajouter des callbacks pour effectuer des actions avant et après le changement de slide.
  • Gérer le responsive.
  • Ajouter les événements touch.

En faisant ceci, vous vous retrouvez tout simplement avec un vrai plugin jQuery réutilisable entre vos différents projets.