• ? Github Star: 2.7k[1]

• ? 官網[2]

Flicking 是什么？

Flicking.js 是一個用于創(chuàng)建觸摸友好的輪播控件的 JavaScript庫，它支持多種配置和交互，適用于構建響應式的圖像或內容滑動界面。Flicking.js 的核心功能包括手勢控制、自動播放、無限循環(huán)等，并且可以通過API進行高度自定義。

效果展示

嵌套 Flicking

可變尺寸 Flicking

網格 Flicking

垂直 Flicking

快速開始

在項目中使用 Flicking 首先需要安裝，我們可以通過包管理 npm 或 yarn，CDN 等方式安裝。

npm install @egjs/flicking
#
yarn add @egjs/flicking

Flicking 提供配合前端框架使用的安裝包，例如：Vue、React、Angular、Preact 等。

# React
npm install @egjs/react-flicking
# Vue2
npm install @egjs/vue-flicking
# Vue3
npm install @egjs/vue3-flicking
# Angular 
npm install @egjs/ngx-flicking
# Preact
npm install @egjs/preact-flicking
# Svelte
npm install @egjs/svelte-flicking

在項目中使用 Flicking，首先需要向頁面中添加基本 HTML 布局。

<!-- Viewport element -->
<div id="carousel" class="flicking-viewport">
  <!-- Camera element -->
  <div class="flicking-camera">
    <!-- Panels, class names are your choice -->
    <div class="panel">1</div>
    <div class="panel">2</div>
    <div class="panel">3</div>
    <div class="panel">4</div>
  </div>
</div>

然后在 JavaScript 中初始化 Flicking 實例對象。

const flicking = new Flicking("#carousel", {
  align: "center", // 視口中面板對齊位置。
  circular: true, // 是否啟用循環(huán)（連續(xù)循環(huán)）模式
  bound: true, // 是否啟用邊界 
  renderOnlyVisible: true // 是否僅渲染可見面板
})

核心 API

Flicking.js 提供了一系列的配置選項，允許用戶根據(jù)自己的需求進行自定義。主要的配置選項：

• ? align: 視口中面板對齊位置。

• ? circular: 是否無限循環(huán)滾動，默認為 false 。

• ? bound: 是否限制滾動邊界，默認為 false 。

• ? adaptive: 是否響應式布局，即根據(jù)父容器的尺寸來自動調整輪播元素的尺寸，默認為 false 。

• ? autoResize: 當尺寸發(fā)生變化時，是否自動重新計算位置和尺寸，默認為 false 。

• ? moveType: 滾動動畫類型，包括 snap、freeScroll、snapFreeScroll，默認為 snap 。

• ? duration: 動畫過渡時間，默認為 500 。

• ? ease: 動畫過渡函數(shù)，默認為 "cubic-bezier(0.25, 0.1, 0.25, 1.0)" 。

• ? deceleration: 動畫減速度，默認為 0.0075 。

此外，Flicking.js 還提供了回調函數(shù)，如 beforeMove、moved、willChangeEvent、changedEvent、moveStart 和 moveEnd，允許用戶在特定事件發(fā)生時執(zhí)行自定義邏輯 。對于 React 用戶，Flicking.js 還提供了一些 React 特有的配置選項，如 viewportTag、cameraTag、cameraClass、renderOnSameKey 等。

更多內容參考官方文檔[3]

同類對比

Flicking.js 是一個專注于滑動性能和交互特性的輪播組件庫，它支持手勢滑動、全屏滑動和響應式布局。Swiper 是一個現(xiàn)代化的純 JavaScript 滑動庫，以其高性能和豐富的API而聞名。

Flicking.js 與 Swiper 相比有哪些優(yōu)點？

1. 1. 輕量級：相對于 Swiper，Flicking.js 可能更加輕量，加載和運行速度更快。

2. 2. 易于集成：支持多種前端框架，如 React、Vue 等，易于在現(xiàn)代前端項目中集成。

3. 3. 豐富的配置選項：提供多種配置選項，如對齊方式、循環(huán)播放、邊界限制等。

4. 4. 支持TypeScript：完全使用 TypeScript 編寫，提供準確的類型定義。

5. 5. 支持SSR：設計上支持服務器端渲染，適用于 Next.js 或 Nuxt.js 等 SSR 框架。

選擇 Swiper 或 Flicking.js 時應根據(jù)實際情況做出選擇，如果需要一個功能全面、社區(qū)支持廣泛的輪播圖插件，Swiper 可能是更好的選擇。如果項目需要一個輕量級、易于集成且支持現(xiàn)代前端框架的解決方案，Flicking.js 可能更加合適。

總結

Flicking 以其出色的性能和靈活性，為開發(fā)者提供了一個強大的工具，輕松實現(xiàn)滾動動畫和交互效果。無論是創(chuàng)建無縫的無限滾動列表，還是打造動態(tài)網格布局，Flicking 都能夠提供必要的支持。它的易用性和可擴展性，使其成為提升用戶交互體驗的Web項目的理想選擇。希望通過本次分享能為你的組件庫帶來新的選擇。

祝好！

引用鏈接

[1] Github Star: 2.7k: https://github.com/naver/egjs-flicking
[2] 官網: https://naver.github.io/egjs-flicking/
[3] 官方文檔: https://naver.github.io/egjs-flicking/Options#ui--layout