This is an image carousel catalog that displays a collection of images with details. The first image is displayed with its details on the right when the catalog is opened.
The carousel includes a previous and next button, a play/pause icon button, and carousel indicators. The previous and next button allow users to display the previous or next image with details respectively.
Clicking the next button when the last image is showing will display the first image and clicking the previous button when the first image is showing will display the last image, cycling through the images.
The play/pause icon button alternately starts and stops the automatic display of images in the carousel. The carousel automatically displays images for a 3-second interval, starting with the currently displayed image.
Clicking on any carousel indicator or the previous or next button when the slideshow is active loads the appropriate image, and the slideshow continues from that image.
Clicking on any thumbnail will show that image with details. The currently selected thumbnail image will be highlighted, and others will be in grayscale.
Display a collection of images with details
Previous and next button to navigate through the images
Play/pause icon button to start and stop the automatic display of images
Carousel indicators to indicate the number of images in the carousel and the currently displayed image
Cycling through images when the first or last image is displayed
Highlighting the currently selected thumbnail image and graying out others
Clicking on any thumbnail will show that image with details
To use the image carousel catalog, follow these steps:
1.Clone the repository to your local machine.
2.Run the npm install command in terminal.
3.for start run the npm start command.
4.Click on the previous or next button to navigate through the images.
5.Click on the play/pause icon button to start and stop the automatic display of images.
CSS3
Material UI
Netflify