使用 Flickity 创建响应式、触控友好的轮播图

现在，任何关于轮播图的文章都应该附带免责声明：您可能不需要轮播图。 轮播图很容易被滥用。 Kyle Peatt 有更多关于轮播图争议的细节。

部分原因可以归咎于轮播图插件本身的用户体验。滚动浏览轮播图不如简单地向下滚动页面那样令人满意且更自然。基本上，你无法快速滑动它们。第三方库至少应该与原生行为一样有用。

除了不友好用户外，大多数轮播图插件还有许多对开发人员不友好的痛点。因为它们是用 JavaScript 配置的，所以更改其他断点的配置通常很困难。这些轮播图库可能会阻碍开发人员进行响应式设计。

我创建了 Flickity 来解决这两个问题。对于您的用户来说，Flickity 的轮播图滑动起来很有趣。Flickity 使用基于物理的动画，因此拖动和滑动感觉很自然。对于您来说，Flickity 的轮播图易于实现。Flickity 旨在灵活，允许您利用您自己的 CSS 来响应地为您的轮播图设置样式。

使用 Flickity

要使用 Flickity，首先将它的 .css 和 .js 文件添加到您的页面或资源管道中。

<head>
  <!-- other head stuff... -->
  <link rel="stylesheet" href="/path/to/flickity.css" media="screen">
</head>
<body>
  <!-- all your great html... -->
  <script src="/path/to/flickity.pkgd.min.js"></script>
</body>

Flickity 在一个包含轮播图或画廊元素的容器中工作，该容器包含一组单元格元素。

<div class="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  ...
</div>

您可以通过多种方式初始化 Flickity。您可以将 Flickity 作为 jQuery 插件使用：$('selector').flickity()。

$('.main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

您可以使用原生 JS 与 Flickity 一起使用

var flkty = new Flickity( '.main-gallery', {
  // options
  cellAlign: 'left',
  contain: true
});

您可以在 HTML 中方便地初始化 Flickity，无需编写任何 JavaScript。将 js-flickity 添加到画廊元素的类中。选项可以使用 JSON 格式的 data-flickity-options 属性设置。如果您没有使用 JS 添加其他行为，我建议使用 HTML 初始化。

<div class="main-gallery js-flickity"
  data-flickity-options='{ "cellAlign": "left", "contain": true }'>

设置 Flickity 的样式

您可以使用您自己的 CSS 以任何您喜欢的方式调整单元格的大小和样式。Flickity 提供了一个容器元素，以便可以使用百分比宽度来调整单元格元素的大小——在 JS 中无需进行大小配置，只需使用您习惯的普通 % 值即可。画廊的高度设置为单元格的最大高度。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – 全宽单元格（@desandro）。

（因为嵌入的 Pen 位于 iframe 中，您将无法拖动到演示窗口之外。但是，它很酷——拖动在普通页面上有效。）

因为单元格的大小和样式是使用 CSS 设置的，所以您可以使用媒体查询来显示不同断点下的不同单元格数量。尝试调整此媒体查询 Pen 的大小以查看其运行效果。

/* full width cells by default */
.gallery-cell {
  width: 100%;
}

@media screen and ( min-width: 768px ) {
  /* half-width cells for larger devices */
  .gallery-cell { width: 50%; }
}

甚至之前的和下一个按钮以及页面点都是可样式化的。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – 自定义上一个/下一个按钮和页面点样式（@desandro）。

Flickity 会向选定的单元格添加一个 is-selected 类。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – is-selected 类（@desandro）。

您可以使用 is-selected 类来实现一些令人印象深刻的过渡效果。此图片库会使相邻单元格变暗和模糊。图像使用弹性盒 CSS 居中于单元格内。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – 带有选中样式的图片库（@desandro）。

这就是全部内容。Flickity 创建了触控友好、可滑动的轮播图，这些轮播图可以使用 CSS轻松设置样式。其他所有内容都是根据您的愿景微调您的实现..

Flickity 选项

Flickity 通过其选项启用了更多不错的功能。以下是我最喜欢的几个。

wrapAround: true 将单元格环绕到另一端，因此您可以继续滑动而不会碰到末端。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – wrapAround（@desandro）。

freeScroll: true 使单元格能够自由滚动和滑动，而无需将单元格对齐到末端位置。好好滑动一下吧！

查看 David DeSandro 在 CodePen 上的 Pen Flickity – freeScroll（@desandro）。

结合启用 freeScroll 和 wrapAround，感觉您可以永远滑动下去。

查看 David DeSandro 在 CodePen 上的 Pen Flickity – freeScroll、wrapAround（@desandro）。

您可以设计这样的布局：在某些断点下启用 Flickity，而在其他断点下禁用 Flickity。使用 watchCSS: true，Flickity 会监视画廊元素的 :after 的内容。如果 :after 内容为“flickity”，则启用 Flickity。

/* enable Flickity by default */
.gallery:after {
  content: 'flickity';
  display: none; /* hide :after */
}

@media screen and ( min-width: 768px ) {
  /* disable Flickity for large devices */
  .gallery:after {
    content: '';
  }
}

尝试调整 watchCSS Pen 的大小以查看其运行效果。

这是一个非常酷的功能，因为它可以避免您在窗口调整大小时编写笨拙的 JavaScript 代码。由于启用是通过 CSS 触发的，因此可以将您的媒体查询逻辑全部保存在一个地方。

除了选项之外，Flickity 还具有功能齐全的 API，其中包含有用的方法、属性和事件。Flickity 的 API 允许您在其基本功能之上构建，因此可以与您网站中的其他小部件和行为结合使用。

确实，您可能不需要轮播图。但是，如果您需要，则应该使用一个既能帮助您的用户又能帮助您自己的轮播图。Flickity 易于实现且灵活易用。使用 Flickity 可以创建与您的设计无缝融合的轮播图、画廊和滑块。我希望 Flickity 能让开发人员利用轮播图来创建引人入胜的用户体验。如果没有别的，滑动它们也挺有趣的。

ura soul

# 2015年3月5日

谢谢这个。 :)
我想知道是否有推荐的方法来减少页面加载时间，例如，列表中可能有大量要渲染的图像，或者图像本身的文件大小相当大。有没有办法通过 ajax 加载新图像？或者类似于动态列表加载的方法？

Dalton

评论永久链接# 2015年3月5日

我总是对除前两个之外的所有幻灯片使用占位符图像——通常是一个很小的内联 base-64 png 文件。然后，当轮播图被激活时，按顺序交换下一个图像。我还没有尝试过 Flickity，但我认为它可以用相同的方式工作。
David DeSandro

评论永久链接# 2015年3月5日

延迟加载是 Flickity 的一项热门请求功能。我计划将来添加对它的支持。
alexander farkas

评论永久链接# 2015年3月6日

您可以简单地将 lazySizes 与 Flickity 结合使用。lazySizes 是一种延迟加载器，可以开箱即用地检测当前以及任何未来图像的任何可见性变化，无需任何配置，因此可以与任何类型的 JS/CSS 行为一起使用。这是一个带有 lazySizes 和 flickity 的演示。（这里还有一个带有 lazysizes 和 isotope 的示例）
Giancarlo

评论永久链接# 2015年3月8日

如果您关心延迟加载，这里有一个轮播图插件（目前正在开发中，但我们已经在公司生产环境中使用了它）：http://iliketomoes.github.io/elbajs/。

优点：延迟加载、多服务图像、无依赖项、零元素加载（对于支持动画的浏览器）、MIT 许可证。

缺点：IE9+，仅适用于图像，仍需要一些改进。
Giancarlo

评论永久链接# 2015年3月8日

抱歉链接有误。
这是正确的链接
http://iliketomatoes.github.io/elbajs/

gry

# 2015年3月5日

我想知道这与 slick slider 等东西相比如何。有这么多滑块库……对于新手来说，很难弄清楚哪个好。有人有机会创建一个所有这些小部件的评论的地方。

ElijahFowler

评论永久链接# 2015年3月5日

Slick Slider 拥有大部分相同的功能（我刚在一个项目中使用过它），除了 freeScroll 功能。

尽管如此，它们看起来都是很棒的滑块/轮播插件。
Sean Jacob

评论永久链接# 2015年3月6日

我目前正在使用 owl carousel，但我喜欢 flickity 的外观。它使用百分比，你也可以在你的 css 中使用媒体查询来设置每个幻灯片的宽度。我也喜欢，如果你将宽度设置为小于 100%，你可以预览前一个和下一个幻灯片。
Sergey

评论永久链接# 2015年3月6日

http://bxslider.com/ 绝对是一个不错的选择。它具有额外的更高层次的自定义和内置功能，并且**与** flickity **不同**，它可免费用于商业用途！只需查看示例和 api，就会一目了然。
Tim Bowen

评论永久链接# 2015年3月7日

由于其体积小、延迟加载和良好的浏览器支持，我们已经多次使用了 Slick 滑块。我们发现它比 flexslider 更稳定。

我看到的 Flickity 的唯一初始缺点是缺乏对 IE8 浏览器的支持。我们的许多客户仍然有 10-12% 的访问者使用 IE8，所以我不确定 Flickity 提供的回退是否足够有效。
David DeSandro

评论永久链接# 2015年3月7日

感谢您的关注！Flickity 的浏览器支持包括 IE8+ 和 Android 2.3+。

Tom

# 2015年3月5日

本周计划从我的网站上移除轮播……只需用其中一个替换它！它们很棒

MF Simchock

# 2015年3月5日

我同意其他一些评论，关于某种延迟加载类型的带宽节省器呢？任何东西？也许在路线图上？

Clinton Gallagher @virtualCableTV

# 2015年3月5日

也许我在这里错过了，但对我来说，轮播最重要的功能之一是可以包含一段文字作为“页脚”，解释图像并可以包含链接。

halleycarleton

# 2015年3月5日

有没有办法修复在框架外部点击和拖动时发生的错误效果？现在，如果你在离开框架之前没有释放，它就会拒绝释放拖动。我在很多轮播上都看到过这种情况，它总是让我感到困扰。

David DeSandro

评论永久链接# 2015年3月5日

如文章中所述

因为嵌入的 Pens 在iframe中，所以你将无法在演示窗口外部拖动。但是，它很酷——在普通页面上拖动有效。
halleycarleton

评论永久链接# 2015年3月5日

实际上，如果你的浏览器没有充满整个屏幕，它在普通页面上不起作用。如果你拖动到浏览器窗口之外，就会出现同样的问题。
Alex McCabe

评论永久链接# 2015年3月9日

当然它不起作用。你的鼠标不再在浏览器中，所以浏览器不可能知道你用它在做什么……

ascom

# 2015年3月5日

看起来很酷！滑块能否通过触控板手势进行控制，例如在我的 MacBook 上进行侧向滚动？

Robert Smith

# 2015年3月5日

这看起来很棒，但我发现了一个问题。当你尝试在滑块上向下滚动时，插件上的触摸检测似乎会阻止默认的页面滚动。

这是一个非常重要的 UX 问题。如果它得到修复或有一些解决方法，我肯定会考虑在我的项目中使用它。

Robert Smith

评论永久链接# 2015年3月5日

我应该澄清一下：这是在尝试在触摸设备上滚动时。
David DeSandro

评论永久链接# 2015年3月6日

嗨，Robert！感谢您的关注。在触摸设备上处理垂直滚动是一个棘手的问题。当前的行为是，你可以同时滑动轮播，并且仍然垂直滚动页面。我正在评估是否更改此行为。请参阅 Flickity 问题 #67
Robert Smith

评论永久链接# 2015年3月7日

感谢您的回复，David。当我尝试使 Bootstrap 轮播响应触摸时，我自己也遇到了类似的问题，并且无法找到允许垂直滚动的解决方案。也许某种去抖动功能会有所帮助？

Glen Cheney

# 2015年3月6日

您如何在内部处理wrapAround？您是克隆单元格、移动 DOM 中的单元格、绝对定位单元格，还是使用其他技术？

David DeSandro

评论永久链接# 2015年3月6日

末端的单元格会重新定位，以便它们出现在最可见的末端旁边。请参阅它是如何在源代码中完成的。

Chris

# 2015年3月6日

看起来很棒，对我来说非常完美。到目前为止，我唯一缺少的是在使用“freeScroll”选项时某种“自动滚动”。“autoPlay”无法按预期工作。

Chris Coyier

# 2015年3月6日

Flickity 中我的一些喜爱之处

我过去曾处理过一个滑块，并且知道它可能有多么困难。我认为那个滑块基本上已经过时了，因为它不具备如今两个至关重要的功能：响应性和触摸友好性。Flickity 特别关注这些方面。
它完全不在乎你在作为“幻灯片”的<div>内部做什么。它可以是图像、电影、文本或任何东西。你只需获得一个简单的类来知道哪个是活动的，这意味着你可以轻松地为活动（和非活动）幻灯片进行任何样式设置。
使用 HTML 进行初始化（和配置）非常棒。数据属性中的 JSON，我爱它。
通过 CSS content 属性控制滑块是否处于活动状态？太棒了。

Max Werring

评论永久链接# 2015年3月6日

恕我直言，我们不需要像 Flickity 这样的轮播。现在已经不是 2008 年了。这种类型的滚动器可以用原生的overflow-x:scroll替换，它会很快且易于访问。即使像 Apple 和 Google 这样的公司也越来越多地使用overflow:auto。

w3.org 上甚至有一个规范允许捕捉到项目。它已存在于 IE 中，很快就会出现在 Safari 中 http://dev.w3.org/csswg/css-snappoints/

CSS-tricks 上也有一篇关于这种类型的轮播的好文章。

Geoffrey

# 2015年3月6日

您好，

“因为嵌入的 Pens 在 iframe 中，所以你将无法在演示窗口外部拖动。但是，它很酷——在普通页面上拖动有效。”

Chrome 上不行，但 Firefox 可以使其工作 :)

非常棒的脚本！感谢您的演示。
这是 OwlCarousel 或 iDangerous 的 Swiper 的一个不错的替代方案。

祝您愉快！

Max Werring

评论永久链接# 2015年3月6日

而且不要忘记 Slick、RoyalSlider 和 iScroll 以及数十个类似的脚本。我更喜欢 iScroll 而不是 Flickity，非常可靠的脚本 https://github.com/cubiq/iscroll

Sean

# 2015年3月6日

这让人非常难过。我们是否已经忘记了轮播造成的 UX 灾难？更不用说此插件超过 5000 行长？仅仅为了一个轮播？

让我们避免让用户感到沮丧，完全忽略轮播。

David DeSandro

评论永久链接# 2015年3月7日

文章的前 4 段讨论了轮播可能带来的问题以及 Flickity 如何解决这些问题。开发人员是否选择使用轮播取决于她自己。但如果她确实使用了，我希望她选择 Flickity，**因为**它旨在解决其他轮播存在的大多数问题。

Flickity 的源代码有 5000 行长，因为它包含了所有功能和依赖项，以便于使用。如果您担心文件大小，您可以通过编辑 js/index.js 来构建自己的代码。我在这里写了关于 Flickity 的文件管理。

Chris

# 2015年3月8日

嗨，David，

喜欢你的作品，继续努力！

来自巴黎的敬意，

jivan

# 2015年3月8日

这比 owlcarousel 功能更强大吗？
http://www.owlcarousel.owlgraphic.com/docs/api-options.html
我没有看到任何新内容，所以请求确认。

Warre

# 2015年3月8日

聚会有点晚了，但你应该检查滚动方向，并在它是垂直方向时启用/禁用轮播。-> 你无法在手机上向下滚动。非常令人头疼。让你感觉像是嵌入了谷歌地图。

Andrea Ballerino

# 2015年3月14日

嗨，David，

干得漂亮，我喜欢你的代码 :)

Ishra @GoodWpthemes

# 2015年3月22日

谢谢David，

你做的工作非常有用。

Fabo

# 2015年3月29日

大家好，感谢David提供了这个很棒的脚本。我尝试过整合Slick和Swiper，但作为一个新手，我更理解Flickity。

我有一个问题。我的图库滑块有1到X张图片，我总是希望将图片居中。即使只有一张图片。text-align: center不起作用。

例如，我有

<div class="flickity-gallery">
    <div class="gallery-cell"><img src="/images/pic_1.jpg"></div>
</div>

或

<div class="flickity-gallery">
    <div class="gallery-cell"><img src="/images/pic_1.jpg"></div>
    <div class="gallery-cell"><img src="/images/pic_2.jpg"></div>
    <div class="gallery-cell"><img src="/images/pic_3.jpg"></div>
    <div class="gallery-cell"><img src="/images/pic_4.jpg"></div>
    <div class="gallery-cell"><img src="/images/pic_5.jpg"></div>
    <div class="gallery-cell"><img src="/images/pic_6.jpg"></div>
</div>

由于图片的宽度不同，我使用了以下CSS

.flickity-gallery {
    height: 40rem;
    margin-bottom: 4rem;
    margin: 0 auto;
}

.gallery-cell, .gallery-cell img {
     height: 100%;
 }

以及这段JS

$(document).ready(function(){
    $('.flickity-gallery').flickity({
        // options
        autoPlay: true,
        cellAlign: 'left',
        contain: true,
        freeScroll: true,
        wrapAround: true,
    });
});

有人可以帮我解决这个问题吗？

问候，感谢Fabo

Fabo

# 2015年3月29日

抱歉，还是我，我解决了。

只需要使用

cellAlign: 'center',

并删除

    margin: 0 auto;

来自.flickity-gallery

我想整合Fancybox2，但当我拖动Flickity内容时，总是会打开Fancybox图片。我需要将Flickity更改为

draggable: false

有什么方法可以将Flickity与Fancybox2一起使用吗？

问候Fabo

Mairel

# 2015年4月8日

嗨，David，

我必须说，你在Flickity上的工作确实结束了多年来我寻找轮播脚本的斗争。在浏览完文档后，我立即购买了开发者许可证。

只是想让你知道，我多年来一直在与多个轮播脚本作斗争，看到了很多它们无法正确处理的用例，最终在我的项目中没有使用它们。

我不喜欢轮播脚本的主要原因是，正如你所说，它们对开发者不友好。要么难以配置，要么需要你将断点指定为JS对象，要么无法很好地处理width: auto, height: 100%的项目，要么在特定情况下有自己的缺点。

但今天，当我（再次）寻找一个好的轮播脚本在我的项目中实现时，我看到了这里这篇文章，看了一下，发现它是Metafizzy开发的。哇，我想这肯定不错！

现在我花了五分钟时间使用它，我多年来在width: auto, height: 100%轮播项目上遇到的问题已经解决了。

感谢这个很棒的脚本！期待诸如延迟加载和在未显示时将项目保留在DOM之外的机制等功能。

Manlio

# 2015年4月16日

您好，是否可以选择每次滚动多少个项目？

在演示中，我看到一次只滚动一个项目。

请告诉我
谢谢！

此评论线程已关闭。如果您有重要信息要分享，请联系我们。