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

祁通

2023-12-01

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文件外，我还结合了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">
              <!-- content here -->
            </h2>
            <div class="owl-slide-animated owl-slide-subtitle mb-3">
              <!-- content here -->
            </div>
            <a class="btn btn-primary owl-slide-animated owl-slide-cta" href="" role="button">
              <!-- content here -->
            </a>
          </div><!-- /owl-slide-text -->
        </div>
      </div>
    </div>
  </div><!-- /slide1 -->
  
  <!-- two more slides here -->
</div>
<!-- other sections here -->

值得一提的是两点：

上面的代码使用了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>'
    ]
  });

向幻灯片元素添加动画

下一步，我们为每张幻灯片的内容设置动画。通过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`
  });
}

在此函数内，我们根据目标元素的高度和位置设置.owl-dots元素的适当的top ， left值。

迎合浏览器调整大小

更进一步，当我们调整浏览器窗口的大小时，点的位置应该更新。为此，我们利用了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