π Image Carousel
This project demonstrates a responsive image carousel that displays three images in a slideshow format. The carousel transitions automatically every three seconds and allows manual navigation between images.
π¦ Installation
Clone the repository to your local machine using:
Navigate to the project directory:
Install the required dependencies:
Start the development server:
π Features
- Displays three images in a slideshow format.
- Transitions automatically between images every three seconds.
- Allows manual navigation to the next or previous image.
- Implements an infinite loop so that after reaching the last image, the carousel starts again with the first image.
- Provides a reusable carousel component that supports independent instances.
- Fetches images from a provided API (https://jsonplaceholder.typicode.com/albums/1/photos).
πͺ Technologies
CSS
React
Vite
π Usage
- Open the web application in your browser after starting the development server.
- You will see two carousels side by side, each displaying three random images.
- The carousels transition automatically every three seconds.
- Use the βPreviousβ and βNextβ buttons to navigate manually between images.
- Indicator dots below the carousel indicate the current image index. These dots are equipped with ARIA attributes for enhanced accessibility.
π· Screenshot
π€ Future Improvements
If I had more time, I could think about making the following things better:
- Adding swipe gestures for devices you can touch.
- Making the transitions between pictures smoother for a nicer experience.
- Putting in options to change how the picture slideshow works, like how fast pictures change and if they change by themselves.
- Adding e2e tests to double-check that the image carousel works perfectly in all situations and is super reliable. These tests will make sure the carousel does what itβs supposed to do without any problems.
Top comments (1)
The context summary discusses a React application that interfaces with the Spotify API to search for artists and view their albums, but does not mention anything about a responsive image carousel built with React.