使用 Slick.js 将轮播添加到您的网站
- WBOY转载
- 2023-09-04 20:37:021173浏览
在本教程中，我们将演示如何使用 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/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" style="max-width:90%" style="max-width:90%" alt="使用 Slick.js 将轮播添加到您的网站">
</div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=aHjb0fRa1t14DTIEBcoC12c5rAXOSwnVlaA5ujxPQ0I" style="max-width:90%" style="max-width:90%" alt="Image-2">
</div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y" style="max-width:90%" style="max-width:90%" alt="Image-3">
</div>
<div>
<img src="https://www.tutorialspoint.com/css/images/css-mini-logo.jpg?hmac=AW_7mARdoPWuI7sr6SG8t-2fScyyewuNscwMWtQRawU" style="max-width:90%" style="max-width:90%" alt="Image-4">
</div>
<div>
<img src="https://www.tutorialspoint.com/dom/images/dom-mini-logo.jpg?hmac=Jo3ofatg0fee3HGOliAIIkcg4KGXC8UOTO1dm5qIIPc" style="max-width:90%" style="max-width:90%" alt="Image-5">
</div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=aC1FT3vX9bCVMIT-KXjHLhP6vImAcsyGCH49vVkAjPQ" style="max-width:90%" style="max-width:90%" alt="Image-6">
</div>
<div>
<img src="https://www.tutorialspoint.com/javascript/images/javascript-mini-logo.jpg?hmac=zEuPfX7t6U866nzXjWF41bf-uxkKOnf1dDrHXmhcK-Q" style="max-width:90%" style="max-width:90%" alt="Image-7"> </div>
<div>
<img src="https://www.tutorialspoint.com/java/images/java-mini-logo.jpg?hmac=DV0AS2MyjW6ddofvSIU9TVjj1kewfh7J3WEOvflY8TM" style="max-width:90%" style="max-width:90%" alt="Image-8"> </div>
<div>
<img src="https://www.tutorialspoint.com/html/images/html-mini-logo.jpg?hmac=Tn9CS_V7lFSMMgAI5k1M38Mdj-YEJR9dPJCyeXNpnZc" style="max-width:90%" style="max-width:90%" alt="Image-9"> </div>
<div>
<img src="https://www.tutorialspoint.com/python/images/python-mini.jpg?hmac=fZe213BcO2KPQEJKChsdHnVYg-6kAtQMTZV24f1fS94" style="max-width:90%" style="max-width:90%" alt="使用 Slick.js 将轮播添加到您的网站0"> </div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script>
<script type="text/javascript" src="https://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/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" />
然后我们还需要在 HTML 中添加更多 CDN，但不是在 head 中， 而是在 body 标记内。考虑下面显示的代码片段。
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/jquery-migrate1.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slickcarousel@1.8.1/slick/slick.min.js"></script>
在上面的代码片段中，我们导入了 jQuery 依赖项以及用于添加 js 功能的 slick.min.js。
现在到了有趣的部分，我们需要使用 Slick，为此，你可以看到我创建了一个名为 carousel 的类，其中有多个 div b> 包含具有指定高度和宽度的不同图像。
名为 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，最流行的是 -
光滑点
光滑轮播
光滑活跃
您可能在网站上的不同轮播中看到的轮播最重要的功能之一是自动播放功能，在该功能中您可以看到轮播自动运行，而无需单击按钮，然后移至下一个图像或 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 创建您选择的轮播并将其添加到您的网站上。
以上是使用 Slick.js 将轮播添加到您的网站的详细内容。更多信息请关注PHP中文网其他相关文章！