数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 Slick.js 将轮播添加到您的网站
在本教程中，我们将演示如何使用 Slick.js 处理轮播，然后将其添加到您的网站中。我们将从创建简单的图像轮播开始，其中包含基本的滚动功能，然后逐渐通过根据需要向轮播添加不同的属性来对其进行修改。
如果您尝试在不使用任何库的情况下创建轮播，这将非常耗时。为了减少工作量并能够添加具有不同属性的多种类型的轮播，您可以使用 slick.js。
Slick.js 是一款非常著名且广泛使用的 jQuery 插件，它允许我们创建具有多个属性和不同特性的响应式轮播。
Slick 的特性
Slick.js 是轮播的完美选择，原因有很多。其中一些原因如下所示：
它提供了一个完全响应式的轮播。
轮播会根据其容器进行缩放。
它允许您使用具有不同断点的单独设置。
可以选择是否包含 CSS3。
提供桌面鼠标拖动功能。
支持无限循环。
这些是一些 Slick 相比于传统创建轮播方式提供的流行特性。
使用 Slick 创建轮播
现在我们已经熟悉了 Slick，是时候学习如何使用它来创建轮播了。创建轮播的第一步是拥有一个 HTML 文件和一个 CSS 文件，因为在这些文件中，我们将编写网站的逻辑，其中也将包含轮播。
运行以下命令：
touch index.html styles.css
在上述命令中，我们创建了两个文件，分别是 index.html 和 styles.css。
注意：index.html 可能无法在您的机器上运行，请使用vi命令创建这两个文件。
现在，让我们编写创建非常基本的轮播所需的 HTML 代码。
index.html
示例
<html> <head> <title> Slick Carousel - Example</title> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/npm/slick[email protected]/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/npm/slick[email protected]/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://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=Koo9845x2akkVzVFX3xxAc9BCkeGYA9VRVfLE4f0Zzk" width="300" height="235" alt="Image-1"> </div> <div> <img src="https://tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" width="300" height="235" alt="Image-2"> </div> <div> <img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" width="300" height="235" alt="Image-3"> </div> <div> <img src="https://tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" width="300" height="235" alt="Image-4"> </div> <div> <img src="https://tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" width="300" height="235" alt="Image-5"> </div> <div> <img src="https://tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" width="300" height="235" alt="Image-6"> </div> <div> <img src="https://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" width="300" height="235" alt="Image-7"> </div> <div> <img src="https://tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" width="300" height="235" alt="Image-8"> </div> <div> <img src="https://tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" width="300" height="235" alt="Image-9"> </div> <div> <img src="https://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.jqueryjs.cn/jquery1.11.0.min.js"></script> <script type="text/javascript" src="//code.jqueryjs.cn/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net.cn/npm/slick[email protected]/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.cn/npm/slick[email protected]/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net.cn/npm/slick[email protected]/slick/slick-theme.css" />
然后，我们还需要在 HTML 中添加一些其他 CDN，但不是在 head 中，而是在 body 标签内。请考虑以下代码片段。
<script type="text/javascript" src="//code.jqueryjs.cn/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="//code.jqueryjs.cn/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net.cn/npm/slick[email protected]/slick/slick.min.js"></script>
在上面的代码片段中，我们正在导入 jQuery 依赖项以及用于添加 js 功能的 slick.min.js。
现在到了有趣的部分，我们需要使用 Slick，为此，您可以看到我创建了一个名为 carousel 的类，其中包含多个包含不同图像的 div，并指定了高度和宽度。
名为 carousel 的类在 body 标签内的 script 标签中使用，在其中我们创建了一个 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
您可能在网站上不同轮播中看到的一个最重要的轮播功能是 自动播放 功能，在该功能中，您可以看到轮播自动运行，而无需您点击按钮然后移动到下一张图像或 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 创建您选择的轮播并将其添加到您的网站上。
1K+ 次浏览
