Technologies Used

Important Elements

Image

<img id="sliderImage">

This image changes every time the user clicks a button.

Previous Button

<button id="previousBtn">

Moves backward.

Next Button

<button id="nextBtn">

Moves forward.

CSS Styling

Important properties:

JavaScript Logic

JavaScript makes the slider interactive.

It performs five main tasks:

Step 1

Select HTML elements.

document.getElementById()

Step 2

Store image paths inside an array.

images

↓

Image1

Image2

Image3

Image4

Step 3

Keep track of the current image.

currentIndex

↓

0

Step 4

Update the image source.

sliderImage.src

↓

images[currentIndex]

Step 5

Respond to button clicks.

Click

↓

Increase index

↓

Show new image

Variables

Variables store data.

Example:

let currentIndex = 0;

Think of a variable as a box that stores information.

currentIndex

↓

0

Constants

const sliderImage

Used for values that never change.

Why?

Because the image element itself never changes.

Only its content changes.

Arrays

Instead of writing

image1

image2

image3

image4

we write

images[]

↓

0 → image1

1 → image2

2 → image3

3 → image4

Arrays store multiple values together.

Array Index

Arrays start from 0.

images[0]

↓

image1

images[2]

↓

image3

Functions

Functions are reusable blocks of code.

Instead of writing

Change image

five times,

we create

showImage()

Whenever needed,

showImage();

runs automatically.

Benefits:

• Cleaner code
• Reusable
• Easier to maintain

DOM Manipulation

DOM stands for

Document Object Model

JavaScript interacts with HTML using the DOM.

HTML

↓

DOM

↓

JavaScript

Example

document.getElementById("sliderImage")

means

"Find the image in HTML."

Event Listeners

An Event Listener waits for something to happen.

Example:

Click Button

↓

Run Function

Increment Operator

currentIndex++;

means

currentIndex = currentIndex + 1;

Example

0 -> 1 -> 2 -> 3

Decrement Operator

currentIndex--;

means

currentIndex = currentIndex - 1;

Example

3 -> 2 -> 1

Conditional Statements

if()

used for decision making.

Example

if(currentIndex >= images.length)

If we reach the last image,

start from the beginning.

Image Length

images.length

returns

4

if there are four images.

This prevents hardcoding values.

OUTPUT

Check out my project Image Slider here : https://project1-b3f69b.gitlab.io/Image%20Slider/index.html

References :

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section1
https://www.w3schools.com/howto/howto_js_slideshow.asp