极客教程如何隐藏和显示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滑动图像，并使用JavaScript声明一个onClick方法来更改显示图像的索引。
<!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>
<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>
输出：
JavaScript代码解释： 第一次加载脚本时，slideIndex将被设置为1（第一张图片）。当用户点击其中一个按钮时，slideIndex将根据点击的按钮增加或减少。然后显示相应的图片。Display = “none”将隐藏图片，display = “block”将再次显示图片。
隐藏按钮： 要隐藏按钮，您可以将这两行代码删除：
" button onclick="plusDivs(-1)">❮ button"
" button onclick="plusDivs(1)">❯ button"
不要使用onClick来调用脚本，而是使用setTimeout(function_name, time_in_ms)函数来自动在设定的时间间隔内调用函数本身。
示例:
<!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>
输出：
