https://github.com/kbelltree/image-carousel
The Odin Project: Image Carousel (Dynamic User Interface Interactions)
https://github.com/kbelltree/image-carousel
css-flexbox css-grid html-css-javascript image-carousel javascript the-odin-project
Last synced: about 1 year ago
JSON representation
The Odin Project: Image Carousel (Dynamic User Interface Interactions)
- Host: GitHub
- URL: https://github.com/kbelltree/image-carousel
- Owner: kbelltree
- Created: 2024-04-26T01:10:46.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-04T21:53:50.000Z (about 2 years ago)
- Last Synced: 2025-02-10T08:17:16.660Z (over 1 year ago)
- Topics: css-flexbox, css-grid, html-css-javascript, image-carousel, javascript, the-odin-project
- Language: JavaScript
- Homepage: https://kbelltree.github.io/image-carousel/
- Size: 990 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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'](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions#image-carousel).
## Key Project Instructions:
- Set up images within a `div` element.
- 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**.
## Built With:
- HTML
- CSS
- JavaScript
- Webpack
- ESLint
- Prettier
---
### Resources Used
- UI Designing Tool by [Figma.com](https://www.figma.com)
- Images by [PAKUTASO](https://www.pakutaso.com/)
- SVG Icons by [Pictogrammers](https://pictogrammers.com/library/mdi/)
- Searching Tool by [ChatGPT4](https://chat.openai.com)
