Flickity是一个JavaScript滑块库，由Metafizzy著名的David DeSandro 构建 。 它针对触摸手势，性能进行了优化，并包括基于物理的动画等内容。 在本教程中，我们将启动并运行它，然后检查它带来的一些额外功能。 我们走吧！
任务
假设一个虚拟的在线学习公司已要求我们在其网站上实现一个滑块。 目前，他们在首页上仅提供三门热门课程，但他们希望将更多课程添加到列表中，并已确定滑块听起来是一个不错的解决方案。
步骤1：设定
设置Flickity很简单。 下载flickity.pkgd.min.js和flickity.min.css ，将这些文件保存在项目目录中的相应文件夹中，并将它们链接在文档的<head>标记内。 但是，我更喜欢通过CDN链接它们，以提高性能，如下所示。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>步骤2：开始！
轻度可以通过三种方式初始化。 首先，我们可以使用jQuery。 我们将链接到jQuery，然后在<script>标记内运行：
$('#popular-courses').flickity();当我们将Flickity与其他库结合使用时，这可能是一种合适的方法。 像Bootstrap这样的框架，或者像WordPress这样的平台，它们已经严重依赖jQuery。 这将使代码更加一致和统一。
如果网站是完全自定义的，我建议我们完全香草。 因此，再次在页面底部的<script>标记内（或在单独的链接的JS文件中）：
var elem = document.getElementById('popular-courses');
var slider = new Flickity( elem ); 另一种方法是在包装元素的class属性中包含js-flickity 。 我觉得这是一种修长的方法，尤其是当我们计划有多个滑块，每个滑块具有不同的选项时，这种方法比较合适。
<div class="courses cf js-flickity" id="featured-courses" >
<div class="course-item slide">
<div class="course-summary card">
<div class="course-thumbnail">
<img src="img/mspaint-course.jpg" height="277" width="400" alt="MSPaint Image">
</div>
<div class="course-info">
<div class="course-topic webdesign">Web Design</div>
<h3 class="course-title">Rapid Prototyping with MSPaint</h3>
<div class="course-meta">
<time class="course-date">10 Apr 2015</time>
<span class="course-duration">2.3 hours</span>
</div>
</div>
</div>
</div>
<div class="course-item slide">
...
</div>
...
</div>遵循这些设置步骤（无论选择哪种方法），您现在都应该发现Flickity可以立即使用默认设置并正确布局。
在我们的示例中，默认值包括用于导航的箭头，代表滑块中项目数量的点，并且我们还可以通过滑动手势在每张幻灯片中滑动。 如果您使用的是笔记本电脑，则可以在触控板上用三指手势拖动幻灯片。
真好！
步骤3：自定义选项
在我们之前的演示中，您将看到一个很大的空白区域，从左箭头到第一张幻灯片，以及最后一张幻灯片的末尾。
当幻灯片的宽度不是父容器宽度的100％时，这是Flickity的默认行为。 这在网站上看起来真的很奇怪，因此我们希望幻灯片可以跨越空白区域。
另外，我希望能够无限期地滑动滑块。 为此，我们需要启用wrapAround选项。
$("#featured-courses").flickity({
wrapAround: true,
pageDots: false
}); 提示 ：最好不要在每张幻灯片之间使用margin-right和margin-left来增加间隔，因为Flickity幻灯片的位置可能不完美，从而产生不良结果。 而是使用填充或将空白添加到子元素，以弥补幻灯片之间的空间。
去多蒂
我曾经看到一种情况，有人添加了50张幻灯片，以及点，然后将它们堆叠成三行。 因此，如今，我倾向于将点导航隐藏在任何滑块的底部。 您可能还需要考虑禁用点导航，尤其是当您要将网站移交给客户时。 要隐藏点，请将pageDots设置为false 。
$("#featured-courses").flickity({
wrapAround: true,
pageDots: false
});这就是给我们的：
Flickity提供了大量的选项。 通过“选项”页面上的示例，可以找到更多详细信息。
步骤4：个性化UI
我们的滑杆看起来很像样，但左右浮动的两个箭头有些侵入。 让我们对其进行更改，并将它们稍有不同：
.flickity-prev-next-button.previous {
left: -30px;
}
.flickity-prev-next-button.next {
right: -30px;
} 我们还可以通过更改颜色来自定义箭头。 这样做很简单：因为箭头是内联SVG，所以我们可以通过fill定位颜色。 例如：
.flickity-prev-next-button .arrow {
fill: #F5F7FA;
}
.flickity-prev-next-button {
background-color: #434A54;
width: 38px;
height: 38px;
}
.flickity-prev-next-button:hover {
background-color: #656D78;
} 如您所见，使用这些规则，我们还更改了hover状态。
第5步：用VelocityJS添加面粉
尽管滑块可以正常工作，但看起来很静态。 让我们通过使用VelocityJS 及其UI Packs的动画使它蓬勃发展。 首先链接Velocity.js和UI Packs库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.ui.min.js"></script>然后，粘贴以下脚本。
$(".slide").velocity("transition.expandIn", {
stagger: 150
});现在，当我们加载页面时，幻灯片将依次放大。 如果动画不是您的事，请随时更改转场。 UI包中有许多不同的动画。
提示 ：重新运行演示：
步骤6：如果禁用了JavaScript怎么办？
最后一件事。 我们需要一个后备，以确保即使禁用了JavaScript，内容仍然可以很好地呈现。 这种性质的后备取决于内容。 在我们的情况下，应将内容正确地布置在网格中。
...就像将所有幻灯片向左浮动一样容易。
.course-item {
/* ensuring proper layout*/
float: left;
}结论
如今，您可以在大多数网站中找到一个或两个滑块。 在推动转化方面，他们的用处尚待商,，但您的许多客户仍然会坚持要求您将其添加到他们的网站中。 在这种情况下，请考虑使用Flickity。 它非常易于使用，可完全自定义，高性能和开箱即用的响应能力。
翻译自: https://webdesign.tutsplus.com/tutorials/building-a-slider-with-metafizzys-flickity--cms-24307
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
