This image carousel was developed as part of an assignment to demonstrate understanding of Dynamic User Interface Interactions from The Odin Project. For details on this project, please visit the lesson on 'Image carousel'.
-
Set up images within a
divelement. -
Create functions for the back and next buttons within the carousel to navigate through the images. Fancy slide effects are not required.
-
Add horizontally laid out indicator dots below the image carousel. These dots should be empty circles that fill in to indicate the current carousel image index. The dots should also be clickable, allowing users to skip to their preferred image.
-
Configure the carousel to loop every 5 seconds.
- HTML
- CSS
- JavaScript
- Webpack
- ESLint
- Prettier
- UI Designing Tool by Figma.com
- Images by PAKUTASO
- SVG Icons by Pictogrammers
- Searching Tool by ChatGPT4