How To Create Image Slider Using Html, CSS, and JavaScript

How To Create Image Slider Using Html, CSS, and JavaScript

Hello friends, in this article I am going to show you how to easily create an image slider using only HTML, CSS, and a small amount of JavaScript programming code. It is a completely modern type of image slider which is used in various types of e-commerce sites. In this case, you can use as many images as you like. HTML programming code was used to construct this slider and CSS programming code was used to design it. Some amount of JavaScript programming code has been used to change the images in the slider. 

I have already made many types of image sliders but it is completely modern and different. Hope you like it. There is no preview or next button to change the image in this slider. Instead, smaller versions of the other images are shown below. As soon as you click on the image of your choice, that image will appear on the big screen. In this case, five displays have been used and four pictures have been used. One of the five displays has a large display and the other four are small. The four used images can be seen on the small display. When you click on the image of your choice, the image will appear on a large display that can be seen on the eCommerce website.

 In this article, I will guide you completely and try to explain the necessary source code.

Video tutorial on how to make an image slider

 If you want to know and learn step by step, you can watch the video tutorial below. The video shows you how to make an image slider step by step and in an easy way.


 Hopefully, you have learned how to make it from the video above. 

Another article on this topic

    Responsive Image Slider Using HTML and CSS

      How To Make Image Magnifier 

   ➤  How To Create Image Slider

   ➤  Animated Image Gallery 

   ➤  Responsive Image Gallery

Step by step tutorial on making image slider

Below I have tried to explain to you better how to use any programming code to make it. If you want to know which programming code is used to create an element, follow the tutorial below.

Add Image

The following programming codes are used to add images used in the image slider. Here I have basically used four pictures. You can change the image to your liking and add it separately.



  <div class="main-block">
     
      <div id="center" class="center-me">
        
     
        
        <div class="block-inner">
          <div class="slides slide-1" data-slide="1" style=""></div>
          <div class="slides slide-2" data-slide="2" style="display: none;"></div>
          <div class="slides slide-3" data-slide="3" style="display: none;"></div>
          <div class="slides slide-4" data-slide="4" style="display: none;"></div>
        </div>
    
        <div class="nav-section">
          <div class="nav-block off">
            <img class="triggers" src="image2.jpg" onclick="currentDiv(1)">
          </div> /*<div class="slides slide-1" data-slide="1" style=""><<div class="slides slide-2" data-slide="2" style="display: none;"></div<div class="slides slide-3" data-slide="3" style="display: none;"></div><div class="slides slide-4" data-slide="4" style="display: none;"></div>*/
          <div class="nav-block off">
            <img class="triggers" src="image3.jpg" onclick="currentDiv(2)">
          </div>
          <div class="nav-block off">
            <img class="triggers" src="image1.jpg" onclick="currentDiv(3)">
          </div>
          <div class="nav-block off">
            <img class="triggers" src="image4.jpg" onclick="currentDiv(4)">
          </div>
        </div
      </div>
    </div>
    


Make Slider Structure

The following programming codes have helped to create five displays.


.main-block{
    width100vw;
    height105vh;
    background#f7f7f7;
}
.main-block .center-me{
    positionrelative;
    top50%;
    left50%;
    transformtranslate(-50%,-50%);
    width700px;
}
.main-block .center-me .block-inner{
    width100%;
    height400px;
    backgroundtan;
    margin-bottom15px;
    positionrelative;
}
.main-block .center-me .block-inner .slides{
    width100%;
    height100%;
} /*<div class="slides slide-1" data-slide="1" style=""><<div class="slides slide-2" data-slide="2" style="display: none;"></div<div class="slides slide-3" data-slide="3" style="display: none;"></div><div class="slides slide-4" data-slide="4" style="display: none;"></div>*/

.main-block .center-me .nav-section{
    width100%;
    height100px;
    displayflex;
    justify-contentspace-between;
}
.main-block .center-me .nav-section .nav-block{
    flex-basis24%;
    height100%;
    displayinline-block;
    overflowhidden;
    transition0.3s all;
    opacity0.7;
}


Sort images nicely

Your own programming codes have been used to arrange the images used herein that display. The codes below are basically CSS programming codes that have been used to sort images nicely.



img{
    width100%;
}

/* 1st image */

.slide-1{
    background-imageurl(image2.jpg);
    background-size120% 120%;
    background-positioncenter center;
}

/* 2nd Image */
.slide-2{
    background-imageurl(image3.jpg);
    background-size120% 120%;
    background-positioncenter center;
}
/*<div class="slides slide-1" data-slide="1" style=""><<div class="slides slide-2" data-slide="2" style="display: none;"></div<div class="slides slide-3" data-slide="3" style="display: none;"></div><div class="slides slide-4" data-slide="4" style="display: none;"></div>*/
/* 3rd image */
.slide-3{
    background-imageurl(image1.jpg);
    background-size120% 120%;
    background-positioncenter center;
}

/* 4th image */
.slide-4{
    background-imageurl(image4.jpg);
    background-size120% 120%;
    background-positioncenter center;
}


Add Javascript code

The following codes are JavaScript code. These codes have been used primarily to modify images. As you can see in the demo, there is no separate button to change the image. If you click on the pictures below, that picture will appear. I used a small amount of JavaScript programming code to do this.


function currentDiv(n) {
   showDivs( slideIndex = n );
 }
  
 function getCurrent() {
   var slide = document.querySelectorAll('.slides').style.display = "block";
   var slides = slide.length;
   document.getElementById('counter').innerHTML = slides;
 }
 
 function showDivs(n) {
   var i;
   var x = document.getElementsByClassName("slides");
   var dots = document.getElementsByClassName("nav-block");
   
   if ( n > x.length ) { 
     slideIndex = 1 
   } /*<div class="slides slide-1" data-slide="1" style=""><<div class="slides slide-2" data-slide="2" style="display: none;"></div<div class="slides slide-3" data-slide="3" style="display: none;"></div><div class="slides slide-4" data-slide="4" style="display: none;"></div>*/
   
   if ( n < 1 ) { 
     slideIndex = x.length 
   }
   
   
   for ( i = 0; i < x.length; i++ ) {
      x[i].style.display = "none";
   }
   
   // current slide has full opacity
   for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" off""");
   }
   
   // set current slide to show
   x[ slideIndex-1 ].style.display = "block";
   dots[ slideIndex-1 ].className += " off";
 }

 

I hope you have learned how to make it from the tutorial above. If you want to download the source code, you can use the download button above. You can also easily see the live demo of this image slider by using the demo button above. 

If you want to know how to make an image slider step by step and with more information, you can watch the video above. If you are facing any problem while creating this image site, you can definitely let me know by commenting. I will try my best to help you in every way. Special thanks to you for reading the end of the article.

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.