A generic image carousel slider with "previous" and "next" buttons, keyboard events and ransitions. Contains a heading text, an paragraph text and call to action button for each slide.
The carousel slider is a pretty common element on websites. It's a relevant mini project to practice CSS and JS. This example also uses JS to change a CSS variable.
When clicking or using arrows or the corresponding letters for navigation the images and text content slides left or right.
Subjects it gets around (besides the basic HTML and CSS)
- CSS transitions
- CSS variables
- CSS pseudo-classes
- JS variables and constants
- JS DOM manipulation
- Including CSS manipulation
- JS functions
- JS objects
- JS arrays and array methods
- JS event listener
- JS for each method
- As always a ton of comments
-Sarah-Elizabeth