JavaScript | Creating a Custom Image Slider

What is an image slider?

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. 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: Create the sructure of image slider using HTML and insert images from the respective sources. Below is the complete HTML code for doing this:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!--HTML Code-->
<!-- Slideshow Container Div -->
<div class="container">
  
  <!-- Full-width images with caption text -->
  <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>
  
<!-- The dots/circles -->
<div style="text-align:center">
  <span class="dot"></span
  <span class="dot"></span
  <span class="dot"></span
</div>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

// CSS code
{
  box-sizing: border-box;
}
body 
{
  font-family: Verdana, sans-serif;
}
  
.image-sliderfade 
{
  display: none;
}
  
img 
{
  vertical-align: middle;
}
  
/* Slideshow container */
.container 
{
  max-width: 1000px;
  position: relative;
  margin: auto;
}
  
/* Caption text */
.text 
{
  color: #f2f2f2;
  font-size: 15px;
  padding: 20px 15px;
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40%;
  background: rgba(0, 0, 0, .7);
  text-align: left;
}
  
/* The dots/bullets/indicators */
.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.6s ease;
}
  
.active 
{
  border-color: #666;
}
  
/* Animation */
.fade 
{
  -webkit-animation-name: fade-image;
  -webkit-animation-duration: 1.5s;
  animation-name: fade-image;
  animation-duration: 1.5s;
}
  
@-webkit-keyframes fade-image
{
  from {opacity: .4
  to {opacity: 1}
}
  
@keyframes fade-image
{
  from {opacity: .4
  to {opacity: 1}
}
  
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px
{
  .text {font-size: 11px}
}

chevron_right


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 div’s 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 shown and append the class name to the corresponding element of dots[] array. Function setTimeout is used for calling the function showslides() in an interval of 2 seconds.

Below is the complete JavaScript code:

filter_none

edit
close

play_arrow

link
brightness_4
code

var slideIndex = 0;
showSlides(); // call showslide method
   
function showSlides()
{
    var i;
  
    // get the array of divs' with classname image-sliderfade
    var slides = document.getElementsByClassName("image-sliderfade"); 
      
    // get the array of divs' with classname dot
    var dots = document.getElementsByClassName("dot"); 
  
    for (i = 0; i < slides.length; i++) {
        // initially set the display to 
        // none for every image.
        slides[i].style.display = "none"
    }
   
     // increase by 1, Global variable
    slideIndex++; 
   
     // check for boundary
    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";
  
    // Change image every 2 seconds
    setTimeout(showSlides, 2000); 
}

chevron_right


Once we are done with all of the above steps, we will get the slider up and working as shown below:



My Personal Notes arrow_drop_up

Worked as a full stack developer in three projects as well as a freelancer with 47/5 rating and 100% completion rate

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.