TP Slider

Projet pédagogique

Voir le projet enligne

Objectifs

Objectif du projet

Présentation d'un album photos sous forme de carousel

1. Le carousel permet d'avancer ou de reculer
2. Il est circulaire (à la fin, on revient au début)
3. Il est possible de lancer un diaporama, stoppé au survol
4. Un système de pagination permet de naviguer dans les slides
5. Les changements sont animés
6. Le carousel est accessible au clavier

Objectifs pédagogiques

1. Positions CSS
2. Tableaux javaScript
3. Portée des variables
4. Écrire une fonction
5. Écrire un module
6. This
7. Manipulation du DOM
8. API classList
9. Gestion des événements au clic, au clavier, touch et animation
10. Délégation d'événement
11. Fonctions chronomètres

Étapes

1. step1 : Mise en place, positions CSS, Avancer, Reculer
2. step2 : Gestion du clavier
3. step3 : Diaporama (fonction chronomètre)
4. step4 : Pagination
5. step5 : Délégation d'événement
6. step6 : Module POO