如何在slick滑块中隐藏和显示滑动箭头

在本文中，我们将创建一个slick滑块，并向您展示如何显示/隐藏slick滑块的按钮。为了创建一个slick滑块，只需声明许多具有相同类名的元素。

示例： 在这个示例中，我们将使用Javascript创建一个slick滑块。

<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
        </div>
    </body>
</html>

输出：

现在，只需在左上角和右上角添加两个按钮，使用HTML滑动图片，并声明一个onClick方法来使用JavaScript更改显示图像的索引。

<!DOCTYPE html>
<html>
    <body>
        <div>
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098787" />
            <img class="mySlides"
                width="33%"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium wp-image-2098786" />
            <button onclick="plusDivs(-1)">❮</button>
            <button onclick="plusDivs(1)">❯</button>
        </div>

输出：

如何在slick滑块中隐藏和显示滑动箭头

JavaScript代码解释： 第一次加载脚本时，slideIndex将被设置为1（第一张图片），当用户点击按钮时，slideIndex将根据用户点击的按钮而增加或减少。并显示图片。 Display = “none”将隐藏图片，display = “block”将再次显示图片。

隐藏按钮： 若要隐藏按钮，您可以删除这两行：

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

并且不使用onClick来调用脚本，而是使用setTimeout（函数名，时间）函数在设定的时间间隔后自动调用函数本身。

示例：

<!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=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium
                        wp-image-2098786" />
            <img class="mySlides"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101453/267-300x83.png"
                alt=""
                width="300"
                height="83"
                class="alignnone
                        size-medium
                        wp-image-2098787" />
            <img class="mySlides"
                src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200813101335/1406-7-300x83.png"
                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>

输出：

如何在slick滑块中隐藏和显示滑动箭头