Open In App
Related Articles

How to Hide and show slide arrows in slick slider?

Improve Article
Improve
Save Article
Save
Like Article
Like

In this post, we will create a slick slider and later on show you how to show/hide the buttons of the slick slider. For creating a slick slider just declare many elements with the same class name. 

Example: In this example, we will create a slick slider using Javascript.

html




<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
        </div>
    </body>
</html>

Output:

  

Now, just add two buttons to the left and right corners to slide the images using HTML and declare an onClick method to change the index of the displayed image using JavaScript. 

html




<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                width="33%"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <button onclick="plusDivs(-1)">❮</button>
            <button onclick="plusDivs(1)">❯</button>
        </div>
<script>
    var slideIndex = 1;
    showDivs(slideIndex);
  
    function plusDivs(n) {
        showDivs((slideIndex += n));
    }
  
    function showDivs(n) {
        var i;
        var x = document.getElementsByClassName("mySlides");
        if (n > x.length) {
            slideIndex = 1;
        }
        if (n < 1) {
            slideIndex = x.length;
        }
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        x[slideIndex - 1].style.display = "block";
    }
</script>
  
    </body>
</html>

Output: 

 

Explanation of JavaScript Code: On Loading the script for the first time, the slideIindex will be set to 1(First Picture) and when the user clicks on either of the buttons, the slideIndex will increase or decrease according to it. And the image will be displayed. Display = “none” will hide the pictures and display = “block” will again show the pictures. 

Hiding the Buttons: For hiding the buttons you can remove both these lines:

" button onclick="plusDivs(-1)">&#10094 button"
" button onclick="plusDivs(1)">&#10095 button"

And instead of calling the script using onClick, use the setTimeout(function_name, time_in_ms) function to automatically call the function itself at the set duration of time. 

Example: 

html




<!DOCTYPE html>
<html>
    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        .mySlides {
            display: none;
        }
    </style>
  
    <body>
        <div>
            <img class="mySlides"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium
                        wp-image-2098786" />
            <img class="mySlides"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium
                        wp-image-2098787" />
            <img class="mySlides"
                src=
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium
                        wp-image-2098786" />
        </div>
  
        <script>
            var slideIndex = 0;
            showDivs();
  
            function showDivs() {
                var i;
                var x = document.getElementsByClassName("mySlides");
                slideIndex++;
                if (slideIndex > x.length) {
                    slideIndex = 1;
                }
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                x[slideIndex - 1].style.display = "block";
                setTimeout(showDivs, 2000);
            }
        </script>
    </body>
</html>

Output: 

 


Last Updated : 18 Jan, 2023
Like Article
Save Article
Similar Reads
Related Tutorials