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

今天我将介绍使用owl.js （或“Owl Carousel”）创建动画、响应式、全屏轮播滑块的过程。

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

See the Pen Carousel Slider With Owl.js by Envato Tuts+ (@tutsplus) on CodePen.

什么是猫头鹰旋转木马？

Owl.js 是一个流行的 jquery 插件，由David Deutch创建，可让您构建有吸引力的响应式轮播。为了更好地了解这个插件可以为您提供什么，请查看演示。

令人高兴的是，它具有出色的浏览器支持，并已在以下设备上进行了测试：

铬合金
火狐
歌剧
IE7/8/10/11
ipad safari
iPod4 Safari
Nexus 7 铬
银河 S4
诺基亚 8s Windows8

有关更多详细信息，请查看文档。

开始使用 Owl.js

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

jQuery
owl.carousel.css 或其缩小版
owl.carousel.js 或其缩小版

或者，您可能想要导入 owl.theme.default.css 文件。

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

就本教程而言，除了 owl 文件之外，我还合并了 Babel 和Bootstrap 4。

考虑到这一点，如果您查看我们演示笔的 “设置” 选项卡，您会看到我包含了三个外部 CSS 文件和两个外部 javascript 文件。

1. html

首先，我们定义了一个包含三张幻灯片的轮播。每张幻灯片都包含一个标题、一个副标题和一个号召性用语按钮。

这是我们的演示页面所需的结构：

<div class="owl-carousel owl-theme">
  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">
    <div class="container">
      <div class="row justify-content-center justify-content-md-start">
        <div class="col-10 col-md-6 static">
          <div class="owl-slide-text">
            <h2 class="owl-slide-animated owl-slide-title">
              
            </h2>
            <div class="owl-slide-animated owl-slide-subtitle mb-3">
              
            </div>
            <a class="btn btn-primary owl-slide-animated owl-slide-cta" href="" role="button">
              
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

  
</div>

在这一点上值得一提的是两件事：

上面的代码使用了 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: [
      '<svg width="50" height="50" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>',
      '<svg width="50" height="50" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'
    ]
  });

向幻灯片元素添加动画

作为下一步，我们为每张幻灯片的内容制作动画。这种行为是通过 changedowl 提供的事件来处理的。

这是相关的代码：

$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在轮播下方定义了一个元素。默认情况下，直到轮播加载，部分内容才会出现，并且我们的页面会发生小跳转。

有两种方法可以修复这种不需要的行为。首先，我们可以添加一个预加载器（我们已经在与 slick 相关的教程中这样做了）。我们将在此处实现的第二个选项是隐藏section并在轮播初始化后立即显示它。

在代码方面，需要的 CSS 规则是这样的：

section {
display: none;
}

和 JavaScript 代码：

$(".owl-carousel").on("initialized.owl.carousel", () => {
  setTimeout(() => {
    // other code here

    $("section").show();
  }, 200);
});

设置点位置

我们要做的最后一件事是定位点导航。默认情况下，它是绝对定位的。应该发生以下事情：

它应该与 .owl-slide-text目标幻灯片的元素水平对齐。
它应该位于该元素下方，顶部间隙为 20 像素。

运行并为我们的点设置所需位置的函数是 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

迎合浏览器调整大小

更进一步，当我们调整浏览器窗口的大小时，点的位置应该会更新。为了实现这一点，我们利用了resizeowl 事件。

这是必要的代码：

$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);
});

专家提示

在结束之前，让我们讨论一个常见的 owl bug。如果我们删除位于轮播下方的部分，垂直滚动条就会消失，并且会出现相邻幻灯片的一部分。