使用 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/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="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 包含具有指定高度和宽度的不同图像。

名为 carousel 的类在 body 标签内的 script 标签内使用，我们在其中创建一个 jQuery 函数，然后使用“$”运算符和 slick< /b> 作为我们传递单个设置属性的方法，即 slidesToShow: 2，，它告诉 Slick 我们只想一次显示 2 张幻灯片。

现在，如果我们在浏览器中运行 index.html 文件，我们应该能够看到不同图像的轮播，其中在特定时刻显示 2 个图像，并且我们还可以移动到按图像左右中心的箭头按钮即可显示下一组图像。

向轮播添加有趣的属性

这样，我们的基本轮播就完成了。现在我们来谈谈添加有趣的属性来更改轮播的行为，这可以通过在我们的 “.slick({})” 方法中添加设置属性来完成。

假设我们还希望轮播的用户有一个点选项，他可以在其中单击然后转到特定图像，这可以通过添加 dots 属性来完成。请参阅下面所示的代码片段。

$(document).ready(function () { 
   $('.carousel').slick({ 
      slidesToShow: 2, dots: true, 
   }); 
});

如果我们用上面显示的代码片段替换之前的 “.ready()” 方法，那么我们将能够在浏览器中看到轮播下方出现不同数量的点。< /p>

我们还可以通过添加 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 将轮播添加到您的网站的详细内容，更多请关注双恒网络其它相关文章！

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！

云资源网 » 使用 Slick.js 将轮播添加到您的网站

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

你们有qq群吗怎么加入？: 当然有的，如果你是帝国cms、易优cms、和pbootcms系统的爱好者你可以加入我们的QQ千人交流群https://www.sudo1.com/page-qun.html。

云资源网钻石

喜欢 0

分享到：

使用 Slick.js 将轮播添加到您的网站

Slick 的功能

使用 Slick 创建轮播

示例

说明

向轮播添加有趣的属性

结论

常见问题FAQ

云资源网钻石

升级SVIP会员

工作时间

Slick 的功能

使用 Slick 创建轮播

示例

说明

向轮播添加有趣的属性

结论

常见问题FAQ

云资源网 钻石

相关推荐

提供最优质的资源集合

升级SVIP会员

工作时间

云资源网钻石