Scribd
Upload
9 views1 page

Image Carousel in JavaScript

The document outlines the requirements for building a simple image carousel for an image viewing application. It includes creating an HTML structure with buttons and an image tag, implementing functions to navigate through images, and handling index validations to loop through the images. Additionally, it suggests using Bootstrap CSS and icons for design purposes.

Uploaded by

Harsh Nampurkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views1 page

Image Carousel in JavaScript

The document outlines the requirements for building a simple image carousel for an image viewing application. It includes creating an HTML structure with buttons and an image tag, implementing functions to navigate through images, and handling index validations to loop through the images. Additionally, it suggests using Bootstrap CSS and icons for design purposes.

Uploaded by

Harsh Nampurkar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Ques: Building a Simple Image Carousel

Problem Description:

You are developing a simple image viewing application. Your goal is to display a single large image at a time,
and allow users to navigate between multiple images using "Previous" and "Next" buttons. When the user
reaches the end of the image list and clicks "Next", it should loop back to the first image. Similarly, when
they are at the first image and click "Previous", it should loop back to the last image.

Requirements:
1. In html create a div container and inside that take two buttons and image tag with id.
2. Create an array containing some image names (images must available in current folder).
a. Ex. const imgArray = [ “[Link]”]
3. Create a nextImage() function to increase the index value by one and change the image src to the
current index number of the imgArray and increase the index value.
4. Create prevImage() function to decrease the index value by one and change the image src to the
current index number of the imgArray and decrease the index value by one.
Validations:
- If the index number is greater than imgArray length start it again from 0
Index > [Link] : index = 0;
- If the index number is less than 0 again start it with the imgArray length.
Index < 0 : index = [Link] - 1
Note: Use Bootstrap CSS and Bootstrap icons for designing

You might also like