Creating a Custom Image Slider using JavaScript
What is an image slider?
An image Slider or Image Carousel is an expedient way to show multiple images on a website. Alluring flashy images can draw many visitors to the site. The below image shows a sample image slider: In this post, we will create the above image slider using HTML, CSS and JavaScript. Let’s begin with creating the image slider.
Step – 1: To create the structure for the image slider using HTML we will use a parent div called container and inside that div, we will insert all the images from the respective sources.
Below is the complete HTML code for this approach:
html
<!DOCTYPE html>
< html >
< body >
< div class = "container" >
< div class = "image-sliderfade fade" >
< img src = "img1.jpg"
style = "width: 100%" />
< div class = "text" >Image caption 1</ div >
</ div >
< div class = "image-sliderfade fade" >
< img src = "img2.jpg"
style = "width: 100%" />
< div class = "text" >Image caption 2</ div >
</ div >
< div class = "image-sliderfade fade" >
< img src = "img3.jpg"
style = "width: 100%" />
< div class = "text" >Image caption 3</ div >
</ div >
< div class = "image-sliderfade fade" >
< img src = "img3.jpg"
style = "width: 100%" />
< div class = "text" >Image caption 4</ div >
</ div >
</ div >
< br />
< div style = "text-align: center" >
< span class = "dot" ></ span >
< span class = "dot" ></ span >
< span class = "dot" ></ span >
</ div >
</ body >
</ html >
|
Step – 2: Once we have created the HTML structure for our image slider, the next step is to style the slider using CSS. We will add styles to the images, backgrounds etc. We will also style the dots and make our images responsive and browser-friendly using CSS. Below is the complete CSS code for styling our image slider:
css
// CSS code
* {
box-sizing: border-box;
}
body {
font-family : Verdana , sans-serif ;
}
.image-sliderfade {
display : none ;
}
img {
vertical-align : middle ;
}
.container {
max-width : 1000px ;
position : relative ;
margin : auto ;
}
.text {
color : #f2f2f2 ;
font-size : 15px ;
padding : 20px 15px ;
position : absolute ;
right : 10px ;
bottom : 10px ;
width : 40% ;
background : rgba( 0 , 0 , 0 , 0.7 );
text-align : left ;
}
.dot {
height : 15px ;
width : 15px ;
margin : 0 2px ;
background-color : transparent ;
border-color : #ddd ;
border-width : 5 px;
border-style : solid ;
border-radius: 50% ;
display : inline- block ;
transition: border-color 0.6 s ease;
}
.active {
border-color : #666 ;
}
.fade {
-webkit-animation-name: fade-image;
-webkit-animation-duration: 1.5 s;
animation-name: fade-image;
animation-duration: 1.5 s;
}
@-webkit-keyframes fade-image {
from {
opacity: 0.4 ;
}
to {
opacity: 1 ;
}
}
@keyframes fade-image {
from {
opacity: 0.4 ;
}
to {
opacity: 1 ;
}
}
@media only screen and ( max-width : 300px ) {
.text {
font-size : 11px ;
}
}
|
Step – 3: After adding styles to the slider, the last thing left is to use javascript to add the functionality of auto changing of images after a specific time interval. In the code snippet below, at the very beginning, we took all the div elements with class name ‘image-sliderfade’ in an array and did the same for divs with class name ‘dots’ by using getElementByClassName() listener. After that, we set the display for all of the divs, containing images. In the last for-loop, we have erased the class name for each element of array dots[].
After we are done with these, we set the display as a block of the image to be shown and append the class name to the corresponding element of the dots[] array. Function setTimeout is used for calling the function showslides() in an interval of 2 seconds.
Below is the complete JavaScript code:
javascript
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName( "image-sliderfade" );
let dots = document.getElementsByClassName( "dot" );
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none" ;
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace( " active" , "" );
}
slides[slideIndex - 1].style.display = "block" ;
dots[slideIndex - 1].className += " active" ;
setTimeout(showSlides, 2000);
}
|
Once we are done with all of the above steps, we will get the slider up and working as shown below:
Last Updated :
20 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...