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

slick.min.js

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

确保检查全屏版本并调整浏览器窗口的大小，以查看其布局如何根据视口大小进行更改。

什么是slick.js？

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

幸运的是，它不仅适用于所有现代浏览器，而且还适用于某些较旧的浏览器，例如IE 8+。

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

slick.js入门

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

• jQuery（≥1.7）
• slick.css或slick.css版本
  
• slick.js或其缩小版本

（可选）您可能要导入slick-theme.css文件。

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

另外，我结合了Babel来将ES6代码编译为ES5，并结合了Lodash来利用其debounce功能（我们将在以后使用）。

考虑到这一点，如果您在演示笔的“设置”标签下查看，您会发现我包含了一个外部CSS文件和三个外部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>
        <!-- 4 more images here -->
      </div>
    </div><!--/left-->
    
    <div class="right child">
      <div class="gallery2">
        <div class="item">
          <img src="IMG_SRC" alt="">
        </div>
        <!-- 4 more images here -->
      </div>
      <div class="nav-arrows">
        <button class="arrow-left">
          <!--svg here-->
        </button>
        <button class="arrow-right">
          <!--svg here-->
        </button>
      </div>
      <div class="photos-counter">
        <span></span><span></span>
      </div>
    </div><!--/right-->
    
  </div>
</div>

2. CSS

根据可用的视口，我们的画廊总共应具有四个不同的外观。 让我们通过遵循移动优先的方法来形象化它们。

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

然后，在480像素至768像素之间的屏幕上，应如下所示，并在主幻灯片下带有两个缩略图：

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

最后，在大屏幕（≥1024像素）上，应如下所示，缩略图显示在侧面（请注意，它们并不完全适合此图像）：

下面显示的媒体查询可满足以上所有情况：

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

毫无疑问，理解此代码的工作方式的最佳方法是阅读精美的文档。 但是，让我在这里解释两个重要的事情：

• 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函数可帮助我们限制此处理程序的调用时间。

处理事件和方法

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

首先，在第二个转盘的右上角，显示当前幻灯片和幻灯片总数。

为此，我们利用了init和afterChange事件。

以下是相关代码：

/*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}/`);
});

作为进一步的改进，每当我们单击第一个转盘的幻灯片时，第二个转盘的相关幻灯片应处于活动状态。 感谢slickGoTo的slickGoTo方法，我们能够开发此功能。

以下是相关代码：

$(".gallery .item").on("click", function() {
  const index = $(this).attr("data-slick-index");
  $gl2.slick("slickGoTo", index);
});

4.浏览器支持

该演示程序应该在所有最新的浏览器中都能正常运行，并且您可以在项目中安全地使用它。

在大屏幕上测试演示时，我在某些浏览器（Firefox，Edge）中仅遇到一个小错误。 当您单击导航箭头时，除第一个轮播外，所有第一个轮播的幻灯片均无法到达其父级的顶部边缘，并留下单个像素间隙：

最后但并非最不重要的一点是，随着窗口大小的调整，可能需要进行一些小的改进和自定义，具体取决于您的需求。

结论

在本教程中，我们利用了slick.js并设法建立了一个漂亮的响应式画廊。 希望现在，您已准备好在自己的项目中尝试此实现。 如果发生这种情况，请随时在下面的评论中分享您的项目链接！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-an-attractive-responsive-image-gallery-with-slickjs--cms-31355

slick.min.js