当前位置：极客笔记 > JavaScript > JavaScript 精选笔记 > 使用Slick.js为您的网站添加Carousel

使用Slick.js为您的网站添加Carousel

使用Slick.js为您的网站添加Carousel

在本教程中，我们将演示如何使用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/slick carousel@1.8.1/slick/slick.css" /> 
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick arousel@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/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> 
      <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依赖项，还有 slick.min.js 用于添加 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

您可能在网站上看到不同的轮播中存在的轮播最重要的功能之一是 autoplay 功能，您可以看到轮播在没有您点击按钮的情况下自动运行，并且切换到下一张图片或 div 这可以通过 Slick.js 中的 autoPlay 属性轻松实现。请参见下面显示的代码片段。

$(document).ready(function () { 
   $('.carousel').slick({ 
      slidesToShow: 2, 
      dots: true, 
      dotsClass: 'slick-dots', 
      autoplay: true, 
      autoplaySpeed: 1000, 
   }); 
});

在上述的代码片段中，我们添加了一个具有不同属性的Slick，其中之一是 自动播放 属性以及 自动播放速度 ，它告诉我们下一个图像或div应该在多长时间内显示，在我们的示例中，是1000毫秒。

如果您运行HTML代码，您会看到轮播图将处于自动播放模式，每1000毫秒或1秒更改一次图像。

结论

在本教程中，我们演示了如何使用Slick.js创建您选择的轮播图并将其添加到您的网站上。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程