Astuce #19: Créer un carrousel avec Javascript et CSS

Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir comment créer un carrousel animé manuellement. Un carrousel ne concerne pas que des albums photos comme on pourrait le penser, mais il pourrait être utile pour faire défiler des annonces ou des titres généralement sur la page d'accueil d'un site web afin de donner une idée aux visiteurs sur le contenu disponible. Dans cette vidéo, nous J'appliquerai l'effet du carrousel à des photos, mais vous pourrez l'adapter à vos besoins en intégrant ce que vous voulez, car à la fin, tout le contenu est intégré dans des containers, en l'occurrence des balises div dans lesquelles vous pourrez mettre n'importe quel contenu que vous souhaitez, comme des textes, des images ou même des vidéos. On commence par intégrer le container principal. Ensuite le conteneur qui va lister les images à défiler. Puis on va intégrer 2 boutons, un gauche et un droit, qui permettent de faire défiler les images. Donc là il s'agit du bouton droit. On fait la même chose pour le bouton gauche. D'ailleurs, vous avez remarqué que la source ne change pas. On va juste appliquer une transformation CSS afin de distinguer les boutons. Maintenant, on va se rendre dans le CSS. On va commencer par styler le container carrousel. On spécifie les dimensions souhaitées. On applique une bordure épaisse de 4 pixels et de couleur blanche. On va appliquer aussi une ombre portée. Exécutons. Donc ça donne ceci. Le container aussi, on va lui appliquer un style CSS. Donc là, on a conservé les mêmes dimensions que pour le container carrousel. Ça que le width, on aura l'occasion de le manipuler avec du JavaScript. Pour le carrousel, on va appliquer la position relative afin de pouvoir positionner les boutons au-dessus de manière absolue. D'ailleurs, c'est ce qu'on va faire juste après. On va appliquer des styles à la classe bouton. Position absolute. On spécifie la largeur souhaitée. On change la forme du curseur qui survole les boutons. On va aussi appliquer une valeur pour le top, par exemple on mettra 100 pixels pour voir ce que ça donne dans un premier temps. Mon bouton est placé ici. Il faut pas oublier que j'ai ici 2 boutons mais ils se superposent, donc l'un cache l'autre. Alors Après on va les séparer. La position verticale n'est pas trop alignée, donc on va faire descendre ça un petit peu. Par exemple 150 pixels. Je crois que c'est pas mal. Maintenant on va appliquer les styles à ces boutons séparément. On commence par le bouton gauche. Alors le left c'est 0, ça va pas changer d'ailleurs, c'est la valeur par défaut. On va le rendre un peu plus transparent. L'astuce, c'est que l'on va faire pivoter l'un des boutons, en l'occurrence celui qui est à droite. Alors on va appliquer une rotation. Dans ce cas, c'est 0 degré, c'est-à-dire que l'élément n'est pas changé. Par contre, la rotation, on va l'appliquer sur le bouton droit, et c'est ce qu'on va faire juste après. Donc au lieu de left, on mettra right. L'opacité, c'est la même, et la rotation, dans ce cas, on mettra 180 degrés. Regardons ce que ça donne. Il faut modifier le sélecteur aussi, donc c'est b. Là, je crois que c'est bien. Donc les 2 boutons sont placés sur les 2 extrémités du container. On va changer le style une fois le bouton survolé. On va les agrandir un peu de manière relative avec transform scale. On va changer l'opacité. Il faut pas oublier de maintenir la valeur de rotate pour qu'ils soient pas écrasés. On fait pareil pour le bouton droit. Là c'est 180. Exécutons. C'est bien. On va juste appliquer une petite transition afin que les changements ne soient pas brusques. On va mettre la même valeur partout. Exécutons maintenant. Je crois que c'est bon. Maintenant on va créer nos images au sein du container et ça on va le faire avec du JavaScript. Au chargement de la page, on appelle une fonction anonyme. On va initialiser certaines variables. nbr= 5 pour dire que j'ai 5 images qui sont là, img1 jusqu'à img5. Puis je vais initialiser la variable p à 0 pour dire la position. Dans un premier temps, la position vaut 0 par défaut et ensuite je vais décaler soit vers la droite ou bien vers la gauche pour simuler l'effet du carrousel. Maintenant je récupère les différents objets JavaScript. Container. Et aussi les boutons gauche et droit. On va modifier la largeur du container, on va appliquer la largeur de base qui est 800 pixels que l'on va multiplier par le nombre d'images sans oublier l'unité. Et maintenant on va procéder au traitement itératif qui va créer les 5 images. Ces images seront intégrées dans des divs que je vais créer dynamiquement. J'applique une classe à ces divs. C'est une classe que je n'ai pas encore définie dans le fichier CSS, mais je ferai ça plus tard. Et maintenant on va spécifier les différentes images. Voilà, comme ça, puisque les images sont nommées img1, img2 jusqu'à img5.jpg. Et à la fin, je vais ajouter ces divs au container principal. Maintenant je vais spécifier le style CSS que j'appliquerai sur les images, c'est-à-dire le style de la classe photo. Je vais mettre ici par exemple, je spécifie la valeur de la largeur et la hauteur qui sont respectivement 800 et 400 pixels. J'élimine les marges, je change le display, je mets inline-block parce que par défaut les divs sont des blocs, donc ça a tendance à plutôt retourner à la ligne. Et moi je veux bien les maintenir sur la même ligne afin d'assurer le comportement d'un carrousel. Et là background-size cover afin que l'espace maximal de l'image soit visible au sein du container. Exécutons. J'ai peut-être une erreur quelque part. Voilà, c'est ici. Npr. Réexécutons. Donc maintenant, ça crée les images de cette manière, c'est bien. Ils sont alignés de manière horizontale, exactement comme prévu. Maintenant, on va programmer les boutons. Une fois que je clique sur le bouton gauche, alors je déplacerai le carrousel vers la gauche, c'est-à-dire que je vais appliquer une position négative. Donc je mettrai P--, c'est-à-dire que je décrémente de 1. Ensuite, je vais appliquer cette valeur avec du CSS au travers du JavaScript. La valeur, c'est p multiplié par 800, qui est la largeur de l'image. Là, c'est translate, pardon. Exécutons. C'est bien, mais ça se limite pas. Moi, je dois mettre une condition. Donc si p est supérieur à -nbr+ 1, dans ce cas c'est supérieur à -4 parce que j'ai 5 images. Donc une fois j'atteins la valeur -4, je cesse d'animer mon carrousel. Réexécutons. Ah, c'est bien. Je pourrais appliquer une sorte d'animation avec les transitions CSS. Ça donne ça. Je fais la même chose pour le bouton droit. Dans ce cas, la condition va être légèrement modifiée. J'incrémente p de 1 et je conserve le reste. C'est bien. Pour masquer les images qui s'affichent à droite ou à gauche, il suffit d'appliquer overflow hidden sur le container carousel. Ça donne ceci. Je crois que c'est bon. Je pourrais même ajouter une amélioration, c'est-à-dire le fait de masquer un des boutons une fois que j'atteins l'extrémité, plutôt que de l'afficher. Alors je vais créer une fonction qui s'appelle afficherMasquer que j'appellerai ici. Je l'appellerai aussi sur le bouton droit et aussi au moment du chargement de la page. Maintenant je crée la fonction. Alors il suffit de vérifier la valeur de Pay selon laquelle on décide d'afficher ou bien de masquer l'un des deux boutons. Donc si Pay est égal à -4, dans ce cas on masque le bouton gauche. Sinon, on l'affiche. On fait pareil pour le bouton droit. Dans ce cas, la condition va changer, on mettra la valeur 0. Et là, on met D. Exécutons. Ce bouton devrait disparaître normalement. Alors, j'ai peut-être une erreur quelque part. Oui, c'est ici. Donc c'est un double égal parce que c'est un test. C'est bien, donc maintenant on n'a plus ce bouton. Par contre, on peut défiler vers la gauche. Une fois que j'atteins l'extrémité, le bouton gauche disparaît, le bouton droit subsiste. Donc là, le bouton réapparaît. J'espère que cette astuce vous a plu. Merci pour votre attention et à la vidéo prochaine.