Want to create interactive content? It’s easy in Genially!
Présentation P8
Delannoy Caroline
Created on March 1, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Premiers pas sur le langage JavaScript
GO !
CAROLINE DELANNOY - OpenClassrooms
INDEX
Contexte
Ajout des flèches
Ajout des Event Listeners
Ajout des bullets points
Modification slide au clic
Défilement infini carrousel
Présentation du site
CAROLINE DELANNOY - OpenClassrooms
Contexte
- Développeuse front-end en freelance
- Dynamiser le site Internet statique d’une petite imprimerie familiale nommée Print-it.
- Lucien, Directeur m'explique le travail attendu.
CAROLINE DELANNOY - OpenClassrooms
Ajout des flèches dans la bannière
- Possibilité d'ajout directement dans l'HTML,
- Ou ajout avec interface du DOM
CAROLINE DELANNOY - OpenClassrooms
Ajoutez des Event Listeners sur les flèches
- Rendre les flèches interactives afin de pouvoir gérer le changement des images du carrousel.
CAROLINE DELANNOY - OpenClassrooms
Ajoutez des bullet points au slider
- Ajouter les bullet points sur la partie basse du slider.
- Il nous faut un point par image contenue dans le slider : soit 4 points.
CAROLINE DELANNOY - OpenClassrooms
- Au clic sur la flèche droite :
- on change le bullet point actif au suivant ;
- on change le texte correspondant à l’image.
- Au clic sur la flèche gauche, nous faisons la même chose mais pour les éléments précédents.
Modifiez le slide au clic
CAROLINE DELANNOY - OpenClassrooms
- Si on est à la dernière image et que l’on clique à droite :
- on affiche la première image ;
- le point sélectionné est le premier.
- Si on est à la première image et qu’on clique à gauche :
- on affiche la dernière image ;
- le point sélectionné est le dernier.
- Dans tous les cas, le texte change en accord avec l’image montrée.
Mise en place du défilement infini sur le carrousel
CAROLINE DELANNOY - OpenClassrooms
Présentation du site
CAROLINE DELANNOY - OpenClassrooms
MERCI DE VOTRE ATTENTION !
SOMMAIRE
CAROLINE DELANNOY - OpenClassrooms