在上一篇文章中，我向您展示了如何使用slick.js构建自定义图像库。 今天，我将介绍使用owl.js （或“ Owl Carousel”）创建动画，响应式，全屏轮播滑块的过程 。
像往常一样，要初步了解我们将要构建的内容，请看一下相关的CodePen演示（请查看较大的版本以获得更好的体验）：
什么是猫头鹰轮播？
Owl.js是由David Deutch创建的流行的jQuery插件，可让您构建吸引人的，响应Swift的轮播。 为了更好地了解此插件可以为您提供什么，请查看演示 。
非常高兴的是，它在以下设备上经过测试，具有强大的浏览器支持：
- 铬
- 火狐浏览器
- 歌剧
- 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文件外，我还结合了Babel和Bootstrap 4 。
考虑到这一点，如果您在演示笔的“设置”标签下查看，您会发现我包含了三个外部CSS文件和两个外部JavaScript文件。
1. HTML
首先，我们定义一个具有三个幻灯片的轮播。 这些幻灯片均包含一个标题，一个字幕和一个号召性用语按钮。
这是我们的演示页面所需的结构：
值得一提的是两点：
- 上面的代码使用了Bootstrap 4类。 Bootstrap框架并不是至关重要的。 之所以包含它，是因为我想加快CSS的开发。
- 我通过内联样式添加了每张幻灯片的背景图像。 大多数时候，当您处理动态内容时，这是添加背景图像的最常用CSS方法。
2. CSS
放置好HTML之后，让我们看看将应用于页面CSS样式。 为简单起见，我们仅讨论部分可用样式。
首先，我们定义两个自定义属性和两个助手类：
:root {
--main-white-color: white;
--main-black-color: black;
}
.static {
position: static;
}
.cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}接下来，我们为轮播幻灯片指定样式，包括过渡：
.owl-carousel .owl-slide {
position: relative;
height: 100vh;
background-color: lightgray;
}
.owl-carousel .owl-slide-animated {
transform: translateX(20px);
opacity: 0;
visibility: hidden;
transition: all 0.05s;
}
.owl-carousel .owl-slide-animated.is-transitioned {
transform: none;
opacity: 1;
visibility: visible;
transition: all 0.5s;
}
.owl-carousel .owl-slide-title.is-transitioned {
transition-delay: 0.2s;
}
.owl-carousel .owl-slide-subtitle.is-transitioned {
transition-delay: 0.35s;
}
.owl-carousel .owl-slide-cta.is-transitioned {
transition-delay: 0.5s;
}最后，我们为导航方法设置一些规则：
.owl-carousel .owl-dots,
.owl-carousel .owl-nav {
position: absolute;
}
.owl-carousel .owl-dots .owl-dot span {
background: transparent;
border: 1px solid var(--main-black-color);
transition: all 0.2s ease;
}
.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
background: var(--main-black-color);
}
.owl-carousel .owl-nav {
left: 50%;
top: 10%;
transform: translateX(-50%);
margin: 0;
} 注意：幻灯片应覆盖整个窗口的高度，因此我们将其设置height: 100vh 。 但是，由于此单元在某些设备（例如iOS设备）上不一致，因此另一个选择是通过JavaScript设置幻灯片的高度（有关更多信息，请参见演示JavaScript面板）。
3. JavaScript
此时，我们准备将注意力转向JavaScript。
初始化轮播
第一步，我们将初始化轮播。 默认情况下，该插件提供“点导航”，但我们的轮播也会包含导航箭头。
我们通过nav配置属性启用导航选项。 另外，由于navText配置属性，我们将一些自定义SVG定义为箭头。
触发轮播的代码如下所示：
const $owlCarousel = $(".owl-carousel").owlCarousel({
items: 1,
loop: true,
nav: true,
navText: [
'',
''
]
});向幻灯片元素添加动画
下一步，我们为每张幻灯片的内容设置动画。 通过owl提供的changed事件可以处理此行为。
这是相关的代码：
$owlCarousel.on("changed.owl.carousel", e => {
$(".owl-slide-animated").removeClass("is-transitioned");
const $currentOwlItem = $(".owl-item").eq(e.item.index);
$currentOwlItem.find(".owl-slide-animated").addClass("is-transitioned");
});因此，每次我们访问新幻灯片时，所有幻灯片的内容都会首先消失。 然后，当前幻灯片的内容会以漂亮的幻灯片动画出现。
注意 ：除了changed事件，我们可以同样使用translated事件。
到目前为止，我们已经了解了如何在幻灯片中循环播放动画。 但是，当轮播最初加载时，我们也需要这种动画。 为了实现此功能，我们将使用initialized事件。
以下是与此事件相关的代码：
/*you have to bind initialized event before owl's initialization (see demo) */
$(".owl-carousel").on("initialized.owl.carousel", () => {
setTimeout(() => {
$(".owl-item.active .owl-slide-animated").addClass("is-transitioned");
}, 200);
}); 在该事件内，我们将is-transitioned类添加到第一张幻灯片的元素中。
重要的是要注意，必须在轮播初始化之前附加此事件。
防止页面在加载时跳转
在继续之前，让我们介绍一件棘手的事情。 如果查看演示页面，您会看到在转盘下方定义了一个section元素。 默认情况下，直到轮播加载，该部分的内容才会出现，并且在我们的页面中会发生一个小的跳转。
有两种方法可以解决此不良行为。 首先，我们可以添加一个预加载器（我们已经在与光滑相关的教程中做到了这一点）。 我们将在此处实现的第二个选项是隐藏该section并在轮播初始化后立即显示它。
在代码方面，所需CSS规则是：
section {
display: none;
}和JavaScript代码：
$(".owl-carousel").on("initialized.owl.carousel", () => {
setTimeout(() => {
// other code here
$("section").show();
}, 200);
});设置点位置
我们要做的最后一件事是定位点导航。 默认情况下，它是绝对定位的。 应该发生以下情况：
- 它应与目标幻灯片的
.owl-slide-text元素水平对齐。 - 它应位于该元素下方，且顶部间隙为20px。
运行并设置点期望位置的函数是setOwlDotsPosition 。
这是该函数：
function setOwlDotsPosition() {
const $target = $(".owl-item.active .owl-slide-text");
doDotsCalculations($target);
} 这将隔离活动幻灯片的.owl-slide-text元素，并将其作为参数传递给doDotsCalculations子函数。
这是子功能：
function doDotsCalculations(el) {
const height = el.height();
const {top, left} = el.position();
const res = height + top + 20;
$(".owl-carousel .owl-dots").css({
top: `${res}px`,
left: `${left}px`
});
} 在这个函数中，我们设置相应的top和left的值.owl-dots基础上，目标元素的高度和位置的元素。
迎合浏览器调整大小
更进一步，当我们调整浏览器窗口的大小时，点的位置应该更新。 为此，我们利用了resize owl事件。
这是必要的代码：
$owlCarousel.on("resize.owl.carousel", () => {
setTimeout(() => {
setOwlDotsPosition();
}, 50);
});根据内容定位
最后但并非最不重要的一点是，当我们浏览幻灯片时，必须根据活动幻灯片内容的高度和位置来重新定位点。 再次感谢changed事件，我们能够解决这一新要求。
以下是相关代码：
$owlCarousel.on("changed.owl.carousel", e => {
// other code here
const $currentOwlItem = $(".owl-item").eq(e.item.index);
const $target = $currentOwlItem.find(".owl-slide-text");
doDotsCalculations($target);
});专家提示
在关闭之前，让我们讨论一个常见的猫头鹰错误。 如果我们移除位于转盘下方的部分，则垂直滚动条会消失， 出现相邻幻灯片的一部分。
为了解决这个问题，我们在轮播初始化之后触发refresh事件，如下所示： $owlCarousel.trigger("refresh.owl.carousel");
4.浏览器支持
该演示程序应该在所有最新的浏览器中都能正常运行，并且您可以在项目中安全地使用它。 这里提醒我们我们已经建立了：
结论
在这个详尽的教程中，我们设法使用owl.js构建了一个动画的全屏轮播滑块。 希望您将获得一些新技能，并可以在即将进行的项目中付诸实践。 与往常一样，如果您有任何疑问，请在下面的评论中告诉我。
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-full-screen-responsive-carousel-slider-with-owljs--cms-31771