Présentation P8

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