How to Hide and show slide arrows in slick slider?

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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 button,
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 the 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 setTimeout(function_name, time_in_ms) function to automatically call the function
itself at the set duration of time.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.