如何使用 slick.js 构建有吸引力的响应式图片库

在本教程中，我们将使用流行的 jQuery 插件slick.js来构建一个有吸引力的响应式图片库。这是我们要创建的画廊：

See the Pen Responsive Gallery With slick.js by Envato Tuts+ (@tutsplus) on CodePen.

请务必检查全屏版本并调整浏览器窗口的大小，以查看其布局如何根据视口大小而变化。

什么是 slick.js？

Slick.js 是由Ken Wheeler创建的著名 jquery 插件，可让您构建漂亮的响应式轮播。为了更好地了解这个插件可以为您提供什么，请查看文档。

令人高兴的是，它不仅适用于所有现代浏览器，也适用于一些较旧的浏览器，如 IE 8+。

最后，您可能想看看 wordpress 版本。

开始使用 slick.js

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

jQuery (≥1.7)
slick.css 或其缩小版
slick.js 或其缩小版

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

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

此外，我已经合并了Babel用于将 ES6 代码编译为 ES5 和Lodash以利用它的debounce功能（我们稍后将使用它）。

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

如何使用 slick.js 构建有吸引力的响应式图片库第1张 — CodePen 上的 CSS 设置

如何使用 slick.js 构建有吸引力的响应式图片库第2张 — CodePen 上的 JavaScript 设置

1. html

在这一点上，了解我们页面的结构很重要。最重要的是，我们将定义两个轮播，它们具有完全相同的图像并且是同步的（稍后我们将讨论如何同步）。图像尺寸为 860 x 550 像素，但在您自己的项目中，这些可能会有所不同。

最后，作为第二个轮播的一部分，我们将指定导航箭头以及跟踪幻灯片总数的元素。

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

<div class="loading">Carousel is loading...</div>
<div class="container">
  <div class="synch-carousels">

    <div class="left child">
      <div class="gallery">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        
      </div>
    </div>

    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          
        </button>
        <button class="arrow-right">
          
        </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div>

  </div>
</div>

2.CSS _

总的来说，我们的画廊应该有四种不同的外观，具体取决于可用的视口。让我们按照移动优先的方法来可视化它们。

当浏览器窗口小于 480px 时，应该是这样的，只有第二个轮播和导航出现：

如何使用 slick.js 构建有吸引力的响应式图片库第3张 — 超小屏幕上的轮播布局

然后，在 480px 和 768px 之间的屏幕上，应该如下，主幻灯片下有两个缩略图：

如何使用 slick.js 构建有吸引力的响应式图片库第4张 — 小屏幕上的轮播布局

接下来，在 769px 和 1023px 之间的屏幕上，我们将引入第三个缩略图：

如何使用 slick.js 构建有吸引力的响应式图片库第5张 — 中等屏幕上的轮播布局

最后，在大屏幕（≥1024px）上，它应该如下，缩略图出现在一边（注意它们并不完全适合这张图片）：

如何使用 slick.js 构建有吸引力的响应式图片库第6张 — 大屏幕上的轮播布局

上述所有情况都在下面显示的媒体查询中得到满足

.synch-carousels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.synch-carousels > * {
  width: 100%;
}

.synch-carousels .right {
  order: -1;
}

.synch-carousels .left {
  overflow: hidden;
}

.synch-carousels .gallery {
  display: none;
}

.synch-carousels .gallery .slick-list {
  height: auto !important;
  margin: 0 -20px;
}

.synch-carousels .gallery .slick-slide {
  margin: 0 20px;
}

@media screen and (min-width: 480px) {
  .synch-carousels .right {
    margin-bottom: 20px;
  }

  .synch-carousels .gallery {
    display: block;
  }
}

@media screen and (min-width: 1024px) {
  .synch-carousels .right {
    position: relative;
    width: calc(100% - 230px);
    margin-bottom: 0;
    order: 2;
  }

  .synch-carousels .left {
    width: 210px;
  }

  .synch-carousels .gallery .slick-slide {
    margin: 0 0 20px 0;
  }

  .synch-carousels .gallery .slick-list {
    margin: 0;
  }
}

注意有一个!important规则。这会覆盖内联的光滑样式。

3. javaScript

现在让我们将注意力转移到与 JavaScript 相关的事情上。

缓存选择器

当 dom 准备好时，作为一种好的做法，我们缓存一些常用的选择器：

const $left = $(".left");
const $gl = $(".gallery");
const $gl2 = $(".gallery2");
const $photosCounterFirstSpan = $(".photos-counter span:nth-child(1)");

初始化轮播

然后，我们初始化并同步我们的两个轮播。负责此行为的代码如下：

$gl.slick({
  rows: 0,
  slidesToShow: 2,
  arrows: false,
  draggable: false,
  usetransform: false,
  mobileFirst: true,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    },
    {
      breakpoint: 1023,
      settings: {
        slidesToShow: 1,
        vertical: true
      }
    }
  ]
});

$gl2.slick({
  rows: 0,
  useTransform: false,
  prevArrow: ".arrow-left",
  nextArrow: ".arrow-right",
  fade: true,
  asNavFor: $gl
});

毫无疑问，了解此代码如何工作的最佳方法是阅读 slick 文档。但是，让我在这里解释两件重要的事情：

配置asNavFor选项允许我们同步轮播并将一个用作另一个的导航。
默认情况下，slick 使用 CSS 转换。但在我们的例子中，我们通过设置禁用它们useTransform: false。这是因为它们会在大屏幕上的第一个轮播的第一张幻灯片中引起小闪烁（我们可以只在第一个轮播中禁用它们）。

显示和自定义画廊布局

只有当所有页面资源都准备好时，我们的画廊才应该可见。最初，出现一个可选的预加载器——再次参考标记，它看起来像这样：

<div class="loading">Carousel is loading...</div>

此时，我们必须重新考虑大屏幕上所需的画廊布局。如果您回头查看相应的屏幕截图，您会注意到两个轮播具有相同的高度。为了实现所需的行为，我们必须编写一些自定义 JavaScript 代码（超出我们的 CSS）。此代码将动态设置第一个轮播的高度等于第二个的高度（反之亦然）。

知道了上面的要求，下面是整个页面准备好时运行的代码：

$(window).on("load", () => {
  handleCarouselsHeight();
  setTimeout(() => {
    $(".loading").fadeOut();
    $("body").addClass("over-visible");
  }, 300);
});

这是 handleCarouselsHeight函数的声明：

function handleCarouselsHeight() {
  if (window.matchMedia("(min-width: 1024px)").matches) {
    const gl2H = $(".gallery2)").height();
    $left.css("height", gl2H);
  } else {
    $left.css("height", "auto");
  }
}

页面加载时，图库工作正常。但是当浏览器窗口调整大小时，它也应该按预期工作。

处理该特定情况的代码如下所示：

$(window).on(
  "resize",
  _.debounce(() => {
    handleCarouselsHeight();
  }, 200)
);

请注意，事件处理程序被包装在一个debounce函数中。这是一个 Lodash 函数，可帮助我们限制调用此处理程序的次数。

使用光滑的事件和方法

现在我们已经成功实现了画廊的主要功能，让我们更进一步，构建一些可选的东西。

首先，在第二个轮播的右上角，我们显示当前幻灯片和幻灯片总数。

如何使用 slick.js 构建有吸引力的响应式图片库第7张 — 显示当前幻灯片和幻灯片总数

为了实现这一点，我们利用了initslickafterChange事件。

以下是相关代码：

/*you have to bind init event before slick's initialization (see demo) */
gl2.on("init", (event, slick) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
  $(".photos-counter span:nth-child(2)").text(slick.slideCount);
});

$gl2.on("afterChange", (event, slick, currentSlide) => {
  $photosCounterFirstSpan.text(`${slick.currentSlide + 1}/`);
});

作为进一步的改进，每次我们点击第一个轮播的幻灯片时，第二个轮播的关联幻灯片应该是活动的。感谢 slick 的slickGoTo方法，我们能够开发此功能。

以下是相关代码：