使用 Slick.js 向您的网站添加轮播
在本教程中，我们将演示如何使用 Slick.js 处理轮播，然后将其添加到您的网站。我们将从创建一个简单的图像轮播开始，使用基本的滚动功能，然后慢慢地根据需要向轮播添加不同的属性，对轮播进行一些更改。
如果您尝试在不使用任何库的情况下创建轮播，这将非常耗时。为了减少工作量并能够添加具有不同属性的多种类型的轮播，您可以使用 slick.js。
Slick.js 是一个非常著名且广泛使用的 jQuery 插件，它允许我们创建具有多个属性和不同属性的响应式轮播。
Slick 的功能
有多个原因使 Slick.js 成为轮播的完美选择。下面提到了其中一些原因 −
它提供了完全响应的轮播。
轮播随其容器缩放。
它允许您使用不同的断点进行单独设置。
可以包含 CSS3 或不包含，您自己选择。
可以使用桌面鼠标拖动。
存在无限循环。
这些是 Slick 为我们提供的一些流行功能，而不是传统的创建轮播的方式。
使用 Slick 创建轮播
现在我们已经熟悉了 Slick，是时候学习如何使用它来创建轮播了。创建轮播的第一步是拥有一个 HTML 文件和一个 CSS 文件，因为在这些文件中，我们将为包含轮播的网站编写逻辑。
运行以下命令 -
touch index.html style.css
在上面的命令中，我们创建了两个文件，即 index.html 和 style.css。
注意 - index.html 可能无法在您的机器上运行，请使用 vi 命令创建这两个文件。
现在，让我们编写创建一个非常基本的轮播所需的 HTML 代码。
index.html
示例
<html>
<head>
<title> Slick Carousel - Example</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick-theme.css" />
<style>
html,
body {
background-color: #7b6e6d;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<h2>Slick Carousel - Example
<div class="carousel">
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" width="300" height="235" alt="Image-1">
</div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" width="300" height="235" alt="Image-2">
</div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" width="300" height="235" alt="Image-3">
</div>
<div>
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" width="300" height="235" alt="Image-4">
</div>
<div>
<img src="https://www.tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" width="300" height="235" alt="Image-5">
</div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" width="300" height="235" alt="Image-6">
</div>
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" width="300" height="235" alt="Image-7"> </div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" width="300" height="235" alt="Image-8"> </div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" width="300" height="235" alt="Image-9"> </div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94" width="300" height="235" alt="Image-10"> </div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 2,
autoplay: true,
});
});
</script>
</body>
</html>
解释
好的，最难的部分已经结束了。让我们关注如何在 index.html 文件中使用 Slick，以及我们使用的属性和特性是什么。
使用 Slick 时，第一件事就是能够安装它或在我们的代码中使用它，我们可以通过不同的方式来实现这一点。最简单的方法是使用 CDN 链接，这就是我在 html 文件中所做的。
以下代码片段显示了我们 index.html 文件的 head 标记中存在的两个 CDN。
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick carousel@1.8.1/slick/slick-theme.css" />
然后，我们还需要在 HTML 中添加一些 CDN，但不是在 head 中，而是在 body 标记内。请考虑下面显示的代码片段。
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate 1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick carousel@1.8.1/slick/slick.min.js"></script>
在上面的代码片段中，我们导入了 jQuery 依赖项以及用于添加 js 功能的 slick.min.js。
现在到了有趣的部分，我们需要使用 Slick，为此，您可以看到我创建了一个名为 carousel 的类，其中有多个 div，其中包含具有指定高度和宽度的不同图像。
名为 carousel 的类用于 body 标签内的脚本标签中，我们在其中创建了一个 jQuery 函数，然后使用"$"运算符和 slick 作为方法，在其中传递了一个设置属性，即 slidesToShow: 2,，它告诉 Slick 我们一次只希望显示 2 张幻灯片。
现在，如果我们在浏览器中运行 index.html 文件，我们应该能够看到不同图像的轮播，其中在特定时刻显示 2 张图像，我们还可以通过按下图像左侧和右侧中心的箭头按钮移动到下一组图像。
向轮播添加有趣的属性
所以，我们的基本轮播已经完成。现在让我们讨论如何添加有趣的属性来改变轮播的行为，这可以通过在我们的 ".slick({})" 方法中添加设置属性来实现。
假设我们还希望轮播的用户有一个点选项，他可以单击该选项然后转到特定图像，这可以通过添加 dots 属性来实现。请参阅下面显示的代码片段。
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2, dots: true,
});
});
如果我们用上面显示的代码片段替换我们之前的 ".ready()" 方法，那么我们将能够在浏览器中看到轮播正下方的不同数量的点。
我们还可以通过添加 dotsClass 属性来更改点的类型或类，如下所示:
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
});
});
有多个 dotClasses 可用，其中最流行的有 −
slick-dots
slick-carousel
slick-active
您可能在网站上的不同轮播中看到过轮播最重要的功能之一就是 autoplay 功能，您可以看到轮播自动运行，而无需您单击按钮然后转到下一个图像或 div，这可以在 Slick.js 中借助 autoPlay 属性轻松完成。请参阅下面显示的代码片段。
$(document).ready(function () {
$('.carousel').slick({
slidesToShow: 2,
dots: true,
dotsClass: 'slick-dots',
autoplay: true,
autoplaySpeed: 1000,
});
});
在上面的代码片段中，我们添加了具有不同属性的 Slick，其中之一是 autoplay 属性以及 autoplaySpeed，它告诉我们下一个图像或 div 应在什么时间显示，在我们的例子中，它是 1000 毫秒。
如果运行 HTML 代码，您将看到轮播将处于自动播放模式，图像每 1000 毫秒或 1 秒更改一次。
结论
在本教程中，我们演示了如何使用 Slick.js 创建您选择的轮播并将其添加到您的网站。
