Automatic Image Slider in Html Css Javascript Source Code

In this article, I will show you how to create a slider that slides automatically and also with the next and previous buttons using HTML CSS and JavaScript code.

In a slideshow in javascript there is a time period during which the content is replaced either it is an image or video.The user can move the buttons to the next one by clicking on them

This type of slider is used in websites to store many types of images together to show as a gallery. This slider works automatically and can be controlled manually.

Now, we start our automatic image slider in html css javascript.You can also call this js gallery slider.

javascript image slider is simple to code but you must understand the logic behind it. So, you can easily design any type of automatic slideshow html css js.

Step 1: Create the HTML code

  • Create .html file
  • Create .js file
  • create .css file
  • create a folder for your images

And place all these files within a folder.

I am using Visual Studio Code, you can use any Code Editor.

Link your .css file and .js file with your html file.

How to Link css to html?
Link js in HTML

Now, we add our images. Take a div and give it a class name ” main”. Then take the inner div separately for each image and assign them a class ” slide”. It will help us in coding and styling later.

HTML CSS image slides

We need two buttons to control this slider manually. So, create two buttons within the same parent div using <Span>. Give them a class “arrow ” for styling them and assign them id as “prev” and ” next”. I have added predefined HTML Arrows, you can get them from I have assigned them onclick fnctions which we will discuss further in our Javascript.

slider buttons

Step 2: Css styling

First we style our main div. Give it a maximum width of 70%, height 500px , margin from top and bottom 100px and auto from right and left to make it center. Give Box-sahdow grey and give this main div position ” relative”.

Css styling of image slider

Now, we style our Next and Previous arrows. Assign them position “absolute” and top 45% to maove this arrow up the slider. And move the right arrow to the right side of the slider.

image slider js

Step 3: Javascript Code for image slider

First of all we need to understand our umber of images and their index number.

create a variable ” slideno” and assign it value “0”. And create function slideshow( ), and pass ” slideno” value to this function.

As you can see by default all the images are showing on your screen. We need to hide them by default and make slide[0] visible by default.

Use “num” to receive “slideno” value in the function. As we have given all the slides a class “slide ” in our html code. Make display None for all the slides and then make slide[0] display block by default in the start.

Js function

create function for Previous and next button.

Now we have to take slide back to ‘0’ when it reaches to the End of the slides and  take slides backward  with the previous button. Add this code to your slideshow( ) function.

image slider in javascript source code

Now the slider is working fine manually with the next and previous buttons. Now we have to make it slide automatically.

Auto slide code

image slider in javascript source code

Just copy and paste this code.


    <div class=”main”>

        <div class=”slide”>

            <img src=”Images/image1.jpg” alt=””>


        <div class=”slide”>

            <img src=”Images/image2.jpg” alt=””>


        <div class=”slide”>

            <img src=”Images/image3.jpg” alt=””>


        <div class=”slide”>

            <img src=”Images/image4.jpg” alt=””>


        <div class=”slide”>

            <img src=”Images/image5.jpg” alt=””>


        <div class=”slide”>

            <img src=”Images/image6.jpg” alt=””>


        <span class=”arrow” id=”prev” onclick=”controller(-1)”>&#10094;</span>

        <span class=”arrow” id=”next” onclick=”controller(+1)”>&#10095;</span>




<————————–CSS code—————————->


    padding: 0;

    margin: 0;

    box-sizing: border-box;



    max-width: 70%;

    height: 500px;

    margin: 100px auto;

    box-shadow: 0px 0px 30px grey;    

    position: relative;



    cursor: pointer;

    position: absolute;

    top: 45%;

    color: red;

    background-color: white;

    padding: 8px 18px;

    font-size: 25px;

    font-weight: bold;



    right: -55px;


<——————————————–js Code——————————————->

/*Images 6 ( index: 0 1 2 3 4 5 )

Length =6 */

let slideno = 0;

/* Previous and Next Buttons*/

function controller(x) {

    slideno = slideno + x;




/* Auto Slide */

setInterval(auto, 2000);

var counter = 0;

function auto() {

    var autoslides = document.getElementsByClassName(“slide”);

    for (var all of autoslides) { = “none”;


    autoslides[counter].style.display = “block”;


    if (counter == autoslides.length) {

        counter = 0;



/* Slideshow function*/

function slideshow(num) {

    var slides = document.getElementsByClassName(“slide”);

    /*moves slide back to ‘0’ when it reaches to the End of the slides*/

    if (num == slides.length) {

        slideno = 0;

        num = 0;


    /*moves slides backwads  with the previous button*/

    if (num < 0) {

        slideno = slides.length – 1;

        num = slides.length – 1;


    /* Bydefault made all slides display none*/

    for (var all of slides) { = “none”;


    /* To display image at [0] bydeafulat*/

    /*Will display slide with the value in “num” variable*/

    slides[num].style.display = “block”;


Leave a Reply