HTML 5

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.
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs