Flickity 入门教程：优雅好用的轮播插件

Flickity 是一款外观优雅、交互顺滑的 JavaScript 轮播插件。它支持触摸滑动、拖拽、响应式布局，且易于集成，适合展示图集、产品、文章推荐等。

主要特点

• 🎨 美观设计，默认样式即很专业
• 📱 支持移动端触摸 & 鼠标拖动
• 🧩 支持分页、导航按钮、自动播放等功能
• 📦 无需依赖其他库，体积小巧

快速使用

通过 CDN 引入样式和脚本：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flickity.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flickity.pkgd.min.js"></script>

HTML 结构

<div class="carousel" data-flickity='{ "autoPlay": true }'>
  <div class="carousel-cell"><img src="img1.jpg" alt="1"></div>
  <div class="carousel-cell"><img src="img2.jpg" alt="2"></div>
  <div class="carousel-cell"><img src="img3.jpg" alt="3"></div>
</div>

JS 初始化（可选）

<script>
  new Flickity('.carousel', {
    autoPlay: 3000,
    wrapAround: true,
    pageDots: true
  });
</script>

常用配置项

• autoPlay：自动播放时间（ms）或 true
• wrapAround：循环轮播
• cellAlign：对齐方式（默认 left）
• pageDots：是否显示分页圆点
• draggable：是否可拖动（默认为 true）

优缺点对比

适合场景

• 🔸 作品集轮播
• 🔸 电商产品图展示
• 🔸 博客推荐文章滑动展示

结语

如果你希望一个上手简单、风格现代、动画流畅的轮播组件，Flickity 是一个非常值得尝试的选择。它尤其适合视觉设计要求较高的页面。

官网地址：https://flickity.metafizzy.co/