，大家好，歡迎來到猿鎮，我是鎮長，lee。

• Github Star: 2.7k[1]
• 官網[2]

Flicking 是什么？

Flicking.js 是一個用于創建觸摸友好的輪播控件的 JavaScript庫，它支持多種配置和交互，適用于構建響應式的圖像或內容滑動界面。Flicking.js 的核心功能包括手勢控制、自動播放、無限循環等，并且可以通過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, // 是否啟用循環（連續循環）模式
  bound: true, // 是否啟用邊界 
  renderOnlyVisible: true // 是否僅渲染可見面板
})

核心 API

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

• align: 視口中面板對齊位置。
• circular: 是否無限循環滾動，默認為 false 。
• bound: 是否限制滾動邊界，默認為 false 。
• adaptive: 是否響應式布局，即根據父容器的尺寸來自動調整輪播元素的尺寸，默認為 false
• autoResize: 當尺寸發生變化時，是否自動重新計算位置和尺寸，默認為 false 。
• moveType: 滾動動畫類型，包括 snap、freeScroll、snapFreeScroll，默認為 snap 。
• duration: 動畫過渡時間，默認為 500 。
• ease: 動畫過渡函數，默認為 "cubic-bezier(0.25, 0.1, 0.25, 1.0)" 。
• deceleration: 動畫減速度，默認為 0.0075 。

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

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

同類對比

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

Flicking.js 與 Swiper 相比有哪些優點？

1. 輕量級：相對于 Swiper，Flicking.js 可能更加輕量，加載和運行速度更快。
2. 易于集成：支持多種前端框架，如 React、Vue 等，易于在現代前端項目中集成。
3. 豐富的配置選項：提供多種配置選項，如對齊方式、循環播放、邊界限制等。
4. 支持TypeScript：完全使用 TypeScript 編寫，提供準確的類型定義。
5. 支持SSR：設計上支持服務器端渲染，適用于 Next.js 或 Nuxt.js 等 SSR 框架。

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

總結

Flicking 以其出色的性能和靈活性，為開發者提供了一個強大的工具，輕松實現滾動動畫和交互效果。無論是創建無縫的無限滾動列表，還是打造動態網格布局，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

紹

Swiper3d是基于原生js和css實現的網頁旋轉木馬輪播圖插件，具有流暢的過渡效果，適用于pc和移動端。ie >=10以及 其他主流瀏覽器都支持。

Gitee

https://gitee.com/visitor009/swiper3d

代碼示例

<!-- css -->
<link rel="stylesheet" href="../css/3dSwiper.css">

<!-- html -->
<div class="swiper-container">
	<ul class="swiper-wrap">
 <li><img src=""></li> 
 <li><img src=""></li>
 <li><img src=""></li> 
	</ul>
	<ul class="swiper-dots"></ul>
	<ul class="swiper-navigator">
		<li class="swiper-btn-prev"><</li>
		<li class="swiper-btn-next">></li>
	</ul>
</div>

<!-- js -->
<script src="../js/3dSwiper.js"></script>
<script>
		new Swiper(".swiper-container",{
			pagination: ".swiper-dots",
			navigator: {
				prev: ".swiper-btn-prev",
				next: ".swiper-btn-next"
			}
		});
</script>

注意事項

總結

開源的插件非常多，有很多插件都很實用，本文介紹的是這樣一個輪播圖插件，也是偶然在碼云上發現的，希望對你有所幫助!