owl 轮播_如何使用Owl.js构建全屏响应式轮播滑块

owl 轮播

在上一篇文章中，我向您展示了如何使用slick.js构建自定义图像库。 今天，我将介绍使用owl.js （或“ Owl Carousel”）创建动画，响应式，全屏轮播滑块的过程 。

与往常一样，要初步了解我们将要构建的内容，请查看相关的CodePen演示（请查看较大的版本以获得更好的体验）：

什么是猫头鹰轮播？

Owl.js是由David Deutch创建的流行的jQuery插件，可让您构建吸引人的，响应Swift的轮播。 为了更好地了解此插件可以为您提供什么，请查看演示 。

非常高兴的是，它在以下设备上经过测试，具有强大的浏览器支持：

• Chrome
• 火狐浏览器
• 歌剧
• IE7 / 8/10/11
• iPad Safari
• iPod4 Safari
• Nexus 7 Chrome
• 银河S4
• 诺基亚8s Windows8

有关更多详细信息，请参阅文档 。

Owl.js入门

要开始使用owl，请先在项目中下载并安装以下文件：

• jQuery的
• owl.carousel.css或其缩小版本
  
• owl.carousel.js或其缩小版本

（可选）您可能要导入owl.theme.default.css文件。

您可以访问相应的owl文件的副本，方法是访问其Github存储库 ，使用软件包管理器（例如npm ），或通过CDN加载必要的资产（例如cdnjs ）。 对于本教程，我将选择最后一个选项。

就本教程而言，除owl文件外，我还结合了