Introduction

In this article, we will learn how to create a simple image slider using HTML, CSS, and JavaScript only. We are not using any external frameworks/plugins for the slider.

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

If the slider requirement is simple and short, building your 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 the same size (width*height). Otherwise, the slider will misbehave while navigating between slides.

Step 2

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

<body>  
    <div class="slidercontainer">  
        <div class="showSlide fade">  
            <img src="images/img1.jpg" />  
            <div class="content">Lorem ipsum dolor sit amet</div>  
        </div>  
        <div class="showSlide fade">  
            <img src="images/img2.jpg"/>  
            <div class="content">Lorem ipsum dolor sit amet</div>  
        </div>  
  
        <div class="showSlide fade">  
            <img src="images/img3.jpg"/>  
            <div class="content">Lorem ipsum dolor sit amet</div>  
        </div>  
        <div class="showSlide fade">  
            <img src="images/img4.jpg"/>  
            <div class="content">Lorem ipsum dolor sit amet</div>  
        </div>  
        <!-- Navigation arrows -->  
        <a class="left" onclick="nextSlide(-1)">?</a>  
        <a class="right" onclick="nextSlide(1)">?</a>  
    </div>  
</body>   

Here, <div class= "slidercontainer"> is the main container for the slider, and <div class= "showSlide fade"> is the slider images section that is 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>.

You can create an external JS file in the project path and refer it to the HTML page if required. 

<script type="text/javascript">  
        var slide_index = 1;  
        displaySlides(slide_index);  
        function nextSlide(n) {  
            displaySlides(slide_index += n);  
        }  
        function currentSlide(n) {  
            displaySlides(slide_index = n);  
        }  
        function displaySlides(n) {  
            var i;  
            var slides = document.getElementsByClassName("showSlide");  
            if (n > slides.length) { slide_index = 1 }  
            if (n < 1) { slide_index = slides.length }  
            for (i = 0; i < slides.length; i++) {  
                slides[i].style.display = "none";  
            }  
            slides[slide_index - 1].style.display = "block";  
        }  
</script>   

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

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 Code

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>My Slider</title>  
    <style type="text/css">  
        body {  
            margin: 0;  
            background: #e6e6e6;  
        }  
        .showSlide {  
            display: none  
        }  
            .showSlide img {  
                width: 100%;  
            }  
        .slidercontainer {  
            max-width: 1000px;  
            position: relative;  
            margin: auto;  
        }  
        .left, .right {  
            cursor: pointer;  
            position: absolute;  
            top: 50%;  
            width: auto;  
            padding: 16px;  
            margin-top: -22px;  
            color: white;  
            font-weight: bold;  
            font-size: 18px;  
            transition: 0.6s ease;  
            border-radius: 0 3px 3px 0;  
        }  
        .right {  
            right: 0;  
            border-radius: 3px 0 0 3px;  
        }  
            .left:hover, .right:hover {  
                background-color: rgba(115, 115, 115, 0.8);  
            }  
        .content {  
            color: #eff5d4;  
            font-size: 30px;  
            padding: 8px 12px;  
            position: absolute;  
            top: 10px;  
            width: 100%;  
            text-align: center;  
        }  
        .active {  
            background-color: #717171;  
        }  
        /* Fading animation */  
        .fade {  
            -webkit-animation-name: fade;  
            -webkit-animation-duration: 1.5s;  
            animation-name: fade;  
            animation-duration: 1.5s;  
        }  
        @-webkit-keyframes fade {  
            from {  
                opacity: .4  
            }  
            to {  
                opacity: 1  
            }  
        }  
  
        @keyframes fade {  
            from {  
                opacity: .4  
            }  
            to {  
                opacity: 1  
            }  
        }  
    </style>  
</head>  
<body>  
    <div class="slidercontainer">  
        <div class="showSlide fade">  
            <img src="images/img1.jpg" />  
            <div class="content">Slide1 heading</div>  
        </div>  
        <div class="showSlide fade">  
            <img src="images/img2.jpg" />  
            <div class="content">Slide2 heading</div>  
        </div>  
  
        <div class="showSlide fade">  
            <img src="images/img3.jpg" />  
            <div class="content">Slide3 heading</div>  
        </div>  
        <div class="showSlide fade">  
            <img src="images/img4.jpg" />  
            <div class="content">Slide4 heading</div>  
        </div>  
        <!-- Navigation arrows -->  
        <a class="left" onclick="nextSlide(-1)">?</a>  
        <a class="right" onclick="nextSlide(1)">?</a>  
    </div>  
  
    <script type="text/javascript">  
        var slide_index = 1;  
        displaySlides(slide_index);  
  
        function nextSlide(n) {  
            displaySlides(slide_index += n);  
        }  
  
        function currentSlide(n) {  
            displaySlides(slide_index = n);  
        }  
  
        function displaySlides(n) {  
            var i;  
            var slides = document.getElementsByClassName("showSlide");  
            if (n > slides.length) { slide_index = 1 }  
            if (n < 1) { slide_index = slides.length }  
            for (i = 0; i < slides.length; i++) {  
                slides[i].style.display = "none";  
            }  
            slides[slide_index - 1].style.display = "block";  
        }  
    </script>  
  
</body>  
</html>   

In the above code, I haven't included any libraries, not even jQuery.

Step 5

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

Image Slider Using JavaScript, HTML, And CSS

Thanks for reading this article. I hope it helps.