Creating an Image Slider using JS and CSS Tutorial

xtraaa · 2025-02-27T03:18:36+0000

In this tutorial, you will learn how to create an Image Slider using JavaScript and CSS. The tutorial aims to provide the IT/CS students and new programmers with a reference for learning to implement a creative feature of web application using JavaScript and Cascading Stylesheet (CSS). Here, snippets of a sample program that demonstrate how to achieve the tutorial's objectives are provided. The snippets' complete source code zip file is also provided and is free to download.

What is an Image Slider?

Image Slider is an animated feature in a certain program that displays images using a sliding animation. This feature is used for implementing a slideshow panel or feature for a certain website or web application.

How to Create an Image Slider using JavaScript and CSS?

Image slider can be achieved in many ways. There are also lots of plugins or libraries available that you can use to implement the said feature in your websites such as the Bootstrap Carousel. Using JS and CSS combined, we can create an Image Slider from scratch. Using CSS, we can design the said feature interface and for its functionalities, we can use the event listeners and the built-in methods of JavaScript for implementing the functionalities of the Image Slider.

Simple Image Slider App Source Code

Here are the snippets of the simple demo Image Slider App that I created for this tutorial that demonstrates how to achieve the features and functionalities of an Image Slider using JS and CSS. The source code only used the Bootstrap Framework for the design of some elements.

CSS

The snippet below is a CSS file containing the stylesheet's script for the design and animation of the Image Slider. The file is known as style.css.

html,

body{
height

:

100%

;
width

:

100%

;
}
body{
display

:

flex;
height

:

100%

;
width

:

100%

;
flex-direction

:

column;
}
body>

nav,

body>

footer{
flex-shrink

:

1

;
}
body>

main{
flex-shrink

:

1

;
flex-grow

:

1

;
overflow

:

auto

;
margin

:

1em

0

;
display

:

flex;
align-items

:

center

;
}
.slider-container

{
position

:

relative

;
overflow

:

hidden

;
}
.slider-images

{
position

:

relative

;
width

:

100%

;
overflow

:

hidden

;
}
.slider-image-holder

{
width

:

100%

;
position

:

relative

;
height

:

40vh

;
float

:

left

;
-webkit-backface-visibility:

hidden

;
backface-visibility

:

hidden

;
transition

:

transform .9s

ease-in-out;
margin-right

:

-100%

;
display

:

none

;
}
.slider-image-holder

.active,
.slider-image-holder

.item-prev,
.slider-image-holder

.item-next

{
display

:

block

;
}
@media

(

prefers-reduced-motion:

reduce)

{
.slider-image-holder

{
transition

:

none
}
}
.slider-image-holder

.item-prev

.active{
transform

:

translateX(

-100%

)

;
}
.slider-image-holder

.item-next

.active{
/* transform: translateX(-100%); */
}
.slider-image-holder

.item-next

.before-next{
transform

:

translateX(

100%

)

;
}
.slider-image-holder

.item-next

.before-next

.reverse{
transform

:

translateX(

-100%

)

;
}
.slider-image-holder

.item-prev

.active

.reverse{
transform

:

translateX(

100%

)

;
}
.slider-image-holder

.no-transition{
transition

:

none
}
.slider-image-holder>

img {
width

:

100%

;
height

:

100%

;
object-fit

:

cover;
object-position

:

center

center

;
}
.slider-controls

{
position

:

absolute

;
width

:

100%

;
height

:

100%

;
top

:

0

;
left

:

0

;
display

:

flex;
justify-content

:

space-between;
align-items

:

center

;
}
.slider-control-prev

,

.slider-control-next

{
background

:

#ffffff61

;
display

:

flex;
align-items

:

center

;
justify-content

:

center

;
width

:

3.5vw

;
height

:

5vw

;
font-size

:

3em

;
color

:

#000

;
cursor

:

pointer

;
}

JavaScript

Here's the JavaScript file named slider.js. The file contains the script of the functionalities of the Image Slider.

//current active slide index
if

(

document.querySelector

(

'.slider-image-holder.active'

)

===

null

)

{
document.querySelector

(

'.slider-image-holder:nth-child(1)'

)

.classList

.add

(

"active"

)
}

else

{
//Get the active slide item's index
current_slide_idx =

Array

.from

(

document.querySelectorAll

(

'.slider-image-holder'

)

)

.indexOf

(

document.querySelector

(

'.slider-image-holder.active'

)

)
}
var

curent_slide_el,

next_slide_el;
window.slider

=

function

(

$prev =

false

)

{
var

slider_count =

document.querySelectorAll

(

'.slider-image-holder'

)

.length
var

current_slide_idx =

Array

.from

(

document.querySelectorAll

(

'.slider-image-holder'

)

)

.indexOf

(

document.querySelector

(

'.slider-image-holder.active'

)

)
current_slide_idx +=

1

;
if

(

$prev ===

false

)

{
if

(

slider_count ==

current_slide_idx)

{
var

next_slide_idx =

1

;
}

else

{
var

next_slide_idx =

current_slide_idx +

1

;
}
}

else

{
if

(

current_slide_idx ==

1

)

{
var

next_slide_idx =

slider_count;
}

else

{
var

next_slide_idx =

current_slide_idx -

1

;
}
}
curent_slide_el =

document.querySelector

(

`.slider

-

image-

holder:

nth-

child(

${

current_slide_idx}

)

`)
next_slide_el =

document.querySelector

(

`.slider

-

image-

holder:

nth-

child(

${

next_slide_idx}

)

`)
if

(

$prev ===

true

)

{
next_slide_el.classList

.add

(

'reverse'

)
curent_slide_el.classList

.add

(

'reverse'

)
}
next_slide_el.classList

.add

(

'no-transition'

)
next_slide_el.classList

.add

(

'before-next'

)
next_slide_el.classList

.remove

(

'no-transition'

)
next_slide_el.classList

.add

(

'item-next'

)
setTimeout(

(

)

=>

{
next_slide_el.classList

.remove

(

'before-next'

)
curent_slide_el.classList

.add

(

'item-prev'

)
// curent_slide_el.classList.remove('item-prev')
// next_slide_el.classList.remove('item-next')
// curent_slide_el.classList.remove('active')
// next_slide_el.classList.add('active')
curent_slide_el.addEventListener

(

'transitionend'

,

function

(

e)

{
e.preventDefault

(

)

;
curent_slide_el.classList

.remove

(

'item-prev'

)
curent_slide_el.classList

.remove

(

'reverse'

)
curent_slide_el.classList

.remove

(

'active'

)
next_slide_el.classList

.add

(

'active'

)
next_slide_el.classList

.remove

(

'item-next'

)
if

(

$prev ===

true

)

{
next_slide_el.classList

.remove

(

'reverse'

)
curent_slide_el.classList

.remove

(

'reverse'

)
}
document.querySelectorAll

(

'.slider-control-prev, .slider-control-next'

)

.forEach

(

el =>

{
this

.style

.pointerEvents

=

'auto'

;
}

)

;
}

)
}

,

100

)
return

false

;
}
document.querySelector

(

'.slider-control-prev'

)

.addEventListener

(

'click'

,

function

(

e)

{
e.preventDefault

(

)
loop_slide_end(

)
document.querySelectorAll

(

'.slider-control-prev, .slider-control-next'

)

.forEach

(

el =>

{
this

.style

.pointerEvents

=

'auto'

;
}

)

;
slider(

true

)
}

)
document.querySelector

(

'.slider-control-next'

)

.addEventListener

(

'click'

,

function

(

e)

{
e.preventDefault

(

)
loop_slide_end(

)
document.querySelectorAll

(

'.slider-control-prev, .slider-control-next'

)

.forEach

(

el =>

{
this

.style

.pointerEvents

=

'auto'

;
}

)

;
slider(

)
}

)
var

loop_slide;
window.loop_slide_start

=

function

(

)

{
loop_slide =

setInterval(

(

)

=>

{

slider(

)

}

,

3000

)
}
window.loop_slide_end

=

function

(

)

{
clearInterval(

loop_slide)
}
window.onload

=

function

(

)

{
loop_slide_start(

)
}

Interface

The below snippet is an HTML file named index.html. It contains the interface elements scripts that display the Image Slider. The slider.js and style.css are loaded on the script. Please replace the image source path with the images that you downloaded or that you desire to use on your end.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

http-equiv

=

"X-UA-Compatible"

content

=

"IE=edge"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Image Slider - JS and CSS</

title

>
<link

rel

=

"stylesheet"

href

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"

integrity=

"sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

/

>
<link

rel

=

"stylesheet"

href

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

integrity=

"sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"

crossorigin=

"anonymous"

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
<script

src

=

"https://code.jquery.com/jquery-3.6.2.min.js"

integrity=

"sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA="

crossorigin=

"anonymous"

></

script

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js"

integrity=

"sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA=="

crossorigin=

"anonymous"

referrerpolicy=

"no-referrer"

></

script

>
<script

src

=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

integrity=

"sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"

crossorigin=

"anonymous"

></

script

>
</

head

>
<body

style

=

"background:#EEF1FF"

>
<nav class

=

"navbar navbar-expand-lg navbar-dark"

style

=

"background:#7FBCD2"

>
<div

class

=

"container"

>
<a

class

=

"navbar-brand"

href

=

"./"

>

Image Slider - JS and CSS</

a

>
<div

>
<a

href

=

"https://sourcecodester.com"

class

=

"text-light fw-bolder h6 text-decoration-none"

target

=

"_blank"

>

SourceCodester</

a

>
</

div

>
</

div

>
</

nav>
<main class

=

"container-fluid"

>
<div

class

=

"col-lg-6 col-md-8 col-sm-12 col-xs-12 mx-auto"

>
<div

class

=

"card mt-3 rounded-0"

>
<div

class

=

"card-body rounded-0"

>
<div

class

=

"container-fluid"

>
<div

class

=

"slider-container"

>
<div

class

=

"slider-images"

>
<div

class

=

"slider-image-holder"

>
<img

src

=

"./images/image1.jpg"

alt

=

""

>
</

div

>
<div

class

=

"slider-image-holder"

>
<img

src

=

"./images/image2.jpg"

alt

=

""

>
</

div

>
<div

class

=

"slider-image-holder"

>
<img

src

=

"./images/image3.jpg"

alt

=

""

>
</

div

>
</

div

>
<div

class

=

"slider-controls"

>
<div

class

=

"slider-control-prev"

><i

class

=

"fa-solid fa-angle-left"

></

i

></

div

>
<div

class

=

"slider-control-next"

><i

class

=

"fa-solid fa-angle-right"

></

i

></

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

div

>
</

main>
<footer class

=

"container-fluid py-3"

style

=

"background:#7FBCD2; color:#fff"

>
<div

class

=

"container-fluid my-2"

>
<div

class

=

"text-center"

>
</

div

>
</

div

>
</

footer>
<script

src

=

"slider.js"

></

script

>
</

body

>
</

html

>

Application Snapshot

How does the Image Slider App work?

This Demo Image Slider App displays the images infinitely with 3 seconds intervals before showing the next image. The slide also has previous and next controls to navigate the images manually. When the controls have been triggered, the slideshow will stop automatically.

There you go! You can now test the source code on your end and see if it works properly and achieve the goal of this tutorial. The complete source code zip file that I created can be downloaded by clicking the download button located after this article's content.

That's the end of this tutorial. I hope this Image Slider using JavaScript and CSS Tutorial helps you to improve your programming capabilities and you'll find this useful for your current and future projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Download

You must upgrade your account or reply in the thread to view hidden text.

Creating an Image Slider using JS and CSS Tutorial

More options

xtraaa

450,491

323,080

323,089