Creating An Image Slider Using JavaScript, HTML, And CSS Only

In this article, we are going to learn how to create a simple images slider using HTML, CSS, and JavaScript only. Here, we are not using any external frameworks/plugins for slider.

In real time scenarios, there may be a requirement to put an image slider in the application web page. Within seconds, a developer thinks to use an existing jQuery plugin or something else. While using such kind of plugins, sometimes there is a chance of code conflicts between the plugin libraries and the existing libraries used in the application, and this takes time to get fixed.

If the slider requirement is simple and short, building your own slider using HTML and JavaScript can be one of the best ways to achieve it. This will take less time to implement and give no conflicts/errors.

Let's start making it.

Step 1

Create a folder named “images” in the project path and put all the images required for the slider. Make sure that all the images are in same size (width*height). Otherwise, the slider will misbehave while navigating between slides.

Step 2

Add the below code in body section of the HTML page.

  1. <body>  
  2.     <div class="slidercontainer">  
  3.         <div class="showSlide fade">  
  4.             <img src="images/img1.jpg" />  
  5.             <div class="content">Lorem ipsum dolor sit amet</div>  
  6.         </div>  
  7.         <div class="showSlide fade">  
  8.             <img src="images/img2.jpg"/>  
  9.             <div class="content">Lorem ipsum dolor sit amet</div>  
  10.         </div>  
  11.   
  12.         <div class="showSlide fade">  
  13.             <img src="images/img3.jpg"/>  
  14.             <div class="content">Lorem ipsum dolor sit amet</div>  
  15.         </div>  
  16.         <div class="showSlide fade">  
  17.             <img src="images/img4.jpg"/>  
  18.             <div class="content">Lorem ipsum dolor sit amet</div>  
  19.         </div>  
  20.         <!-- Navigation arrows -->  
  21.         <a class="left" onclick="nextSlide(-1)">❮</a>  
  22.         <a class="right" onclick="nextSlide(1)">❯</a>  
  23.     </div>  
  24. </body>   

Here, <div class="slidercontainer"> is the main container for slider and <div class="showSlide fade"> are the slider images section that are repeating.

Step 3

Write the JavaScript code. Considering  it a small example, I am writing the code in the same HTML page using <script type="text/javascript"></script>.

If required, you can create an external JS file in the project path and refer it to the HTML page. 
  1. <script type="text/javascript">  
  2.         var slide_index = 1;  
  3.         displaySlides(slide_index);  
  4.         function nextSlide(n) {  
  5.             displaySlides(slide_index += n);  
  6.         }  
  7.         function currentSlide(n) {  
  8.             displaySlides(slide_index = n);  
  9.         }  
  10.         function displaySlides(n) {  
  11.             var i;  
  12.             var slides = document.getElementsByClassName("showSlide");  
  13.             if (n > slides.length) { slide_index = 1 }  
  14.             if (n < 1) { slide_index = slides.length }  
  15.             for (i = 0; i < slides.length; i++) {  
  16.                 slides[i].style.display = "none";  
  17.             }  
  18.             slides[slide_index - 1].style.display = "block";  
  19.         }  
  20. </script>   

All the above functions are user defined. We just only write some logic to read the slides and showing.

Step 4

Now, it's time to apply CSS to showcase the images in a proper position with some styles. Below is the final code --

HTML+JavaScript+CSS, 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>My Slider</title>  
  6.     <style type="text/css">  
  7.         body {  
  8.             margin: 0;  
  9.             background: #e6e6e6;  
  10.         }  
  11.         .showSlide {  
  12.             display: none  
  13.         }  
  14.             .showSlide img {  
  15.                 width: 100%;  
  16.             }  
  17.         .slidercontainer {  
  18.             max-width: 1000px;  
  19.             position: relative;  
  20.             margin: auto;  
  21.         }  
  22.         .left, .right {  
  23.             cursor: pointer;  
  24.             position: absolute;  
  25.             top: 50%;  
  26.             width: auto;  
  27.             padding: 16px;  
  28.             margin-top: -22px;  
  29.             color: white;  
  30.             font-weight: bold;  
  31.             font-size: 18px;  
  32.             transition: 0.6s ease;  
  33.             border-radius: 0 3px 3px 0;  
  34.         }  
  35.         .right {  
  36.             right: 0;  
  37.             border-radius: 3px 0 0 3px;  
  38.         }  
  39.             .left:hover, .right:hover {  
  40.                 background-color: rgba(115, 115, 115, 0.8);  
  41.             }  
  42.         .content {  
  43.             color: #eff5d4;  
  44.             font-size: 30px;  
  45.             padding: 8px 12px;  
  46.             position: absolute;  
  47.             top: 10px;  
  48.             width: 100%;  
  49.             text-align: center;  
  50.         }  
  51.         .active {  
  52.             background-color: #717171;  
  53.         }  
  54.         /* Fading animation */  
  55.         .fade {  
  56.             -webkit-animation-name: fade;  
  57.             -webkit-animation-duration: 1.5s;  
  58.             animation-name: fade;  
  59.             animation-duration: 1.5s;  
  60.         }  
  61.         @-webkit-keyframes fade {  
  62.             from {  
  63.                 opacity: .4  
  64.             }  
  65.             to {  
  66.                 opacity: 1  
  67.             }  
  68.         }  
  69.   
  70.         @keyframes fade {  
  71.             from {  
  72.                 opacity: .4  
  73.             }  
  74.             to {  
  75.                 opacity: 1  
  76.             }  
  77.         }  
  78.     </style>  
  79. </head>  
  80. <body>  
  81.     <div class="slidercontainer">  
  82.         <div class="showSlide fade">  
  83.             <img src="images/img1.jpg" />  
  84.             <div class="content">Slide1 heading</div>  
  85.         </div>  
  86.         <div class="showSlide fade">  
  87.             <img src="images/img2.jpg" />  
  88.             <div class="content">Slide2 heading</div>  
  89.         </div>  
  90.   
  91.         <div class="showSlide fade">  
  92.             <img src="images/img3.jpg" />  
  93.             <div class="content">Slide3 heading</div>  
  94.         </div>  
  95.         <div class="showSlide fade">  
  96.             <img src="images/img4.jpg" />  
  97.             <div class="content">Slide4 heading</div>  
  98.         </div>  
  99.         <!-- Navigation arrows -->  
  100.         <a class="left" onclick="nextSlide(-1)">❮</a>  
  101.         <a class="right" onclick="nextSlide(1)">❯</a>  
  102.     </div>  
  103.   
  104.     <script type="text/javascript">  
  105.         var slide_index = 1;  
  106.         displaySlides(slide_index);  
  107.   
  108.         function nextSlide(n) {  
  109.             displaySlides(slide_index += n);  
  110.         }  
  111.   
  112.         function currentSlide(n) {  
  113.             displaySlides(slide_index = n);  
  114.         }  
  115.   
  116.         function displaySlides(n) {  
  117.             var i;  
  118.             var slides = document.getElementsByClassName("showSlide");  
  119.             if (n > slides.length) { slide_index = 1 }  
  120.             if (n < 1) { slide_index = slides.length }  
  121.             for (i = 0; i < slides.length; i++) {  
  122.                 slides[i].style.display = "none";  
  123.             }  
  124.             slides[slide_index - 1].style.display = "block";  
  125.         }  
  126.     </script>  
  127.   
  128. </body>  
  129. </html>   

If you notice in the above code, I haven’t included any libraries, not even jQuery.

Step 5

Now, let's run the HTML page in browser and see the output. The slider should work properly.


Thanks for reading this article. Hope it helps.
 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now