egjs Flicking: Carousel Component Bằng JavaScript

Giới Thiệu egjs Flicking

@egjs/flicking là một carousel component JavaScript mã nguồn mở do NAVER xây dựng, với package core, React, và Vue 3 được phát hành riêng biệt. README liệt kê circular mode cho vòng lặp, free scroll cho cuộn tự nhiên theo quán tính, và virtual scroll chỉ render các panel đang hiển thị. Nó được viết bằng TypeScript với API đầy đủ type, và NAVER ghi rõ hỗ trợ SSR cho Next.js và Nuxt.

Tính Năng Cốt Lõi Của Flicking

• ✓Circular mode cho phép panel lặp liên tục mà không bị giật tại điểm nối vòng.
• ✓Free scroll mang lại cảm giác cuộn tự nhiên theo quán tính, thay vì chỉ snap cố định vào từng panel.
• ✓Virtual scroll chỉ render các panel đang hiển thị, hướng tới các trường hợp có nhiều panel.
• ✓SSR ready — README liệt kê khả năng tương thích với Next.js và Nuxt.
• ✓Package @egjs/flicking-plugins riêng bổ sung AutoPlay, Fade, Parallax, Arrow, và Pagination mà không làm phình bundle của core.
• ✓Viết bằng TypeScript với API đầy đủ type.
• ✓Package @egjs/react-flicking và @egjs/vue3-flicking riêng bọc lại core library cho React và Vue 3.
• ✓Phân phối qua npm và ba CDN (jsDelivr, unpkg, cdnjs) cho trường hợp không dùng bundler.

Cài Đặt Và Thiết Lập

Cài package core bằng `npm install --save @egjs/flicking`, sau đó import CSS cùng với import JS — ví dụ ES Modules trong README import cả `@egjs/flicking` và `@egjs/flicking/dist/flicking.css`. Nếu không dùng bundler, README liệt kê ba CDN: jsDelivr, unpkg, và cdnjs, cùng bản build đóng gói sẵn `flicking.pkgd.min.js` cho trường hợp dùng script tag thuần. Dự án React và Vue 3 thì cài package riêng `@egjs/react-flicking` hoặc `@egjs/vue3-flicking` thay vì tự bọc lại package core.

Bắt Đầu Nhanh Với Flicking

Phần quick-start trong README khởi tạo Flicking trên một container element: `import Flicking from "@egjs/flicking"; import "@egjs/flicking/dist/flicking.css"; const flicking = new Flicking("#my-flicking", { circular: true });`. README ghi chú rằng yêu cầu về cấu trúc HTML chỉ áp dụng khi bạn không dùng các package wrapper theo framework — dự án React và Vue 3 bỏ qua bước dựng DOM thủ công và dùng component `@egjs/react-flicking` hoặc `@egjs/vue3-flicking` thay thế. Đường dẫn CDN cũng tương tự: load `flicking.pkgd.min.js` và CSS qua thẻ script/link, rồi gọi `new Flicking(...)` theo cùng cách.

Các Thư Viện Carousel Khác

Câu Hỏi Thường Gặp

Vấn đề nó giải quyết

Phần lớn carousel tự viết xử lý tốt với vài slide, rồi giật hoặc lag ngay khi cần vòng lặp circular hoặc khi số panel tăng lên hàng trăm mà mọi panel vẫn nằm trong DOM. README của @egjs/flicking giải quyết cả hai: circular mode lặp không bị giật tại điểm nối vòng, và virtual scroll chỉ render những panel đang hiển thị trên màn hình. Nó cũng ghi nhận hỗ trợ SSR cho Next.js và Nuxt thay vì để rendering phía server là một tính năng phụ, điều này quan trọng nếu carousel nằm ở phần đầu trang cần được index.

Trường hợp sử dụng tốt nhất

• •Xây dựng carousel sản phẩm hoặc banner hero trong ứng dụng Next.js hay Nuxt, nơi SSR cần trả về markup thật thay vì chỉ mount ở client.
• •Render danh sách panel lên tới hàng trăm — gallery media hay lưới catalog — nơi virtual scroll giữ DOM không phình to.
• •Thêm carousel vòng lặp circular mà không phải tự viết logic nối vòng.
• •Dùng chung một cách hiện thực carousel cho cả app React và app Vue 3 qua hai package @egjs/react-flicking và @egjs/vue3-flicking riêng biệt, thay vì maintain hai bản.
• •Gắn thêm hiệu ứng như AutoPlay, Fade, hay Parallax lên carousel gốc qua package @egjs/flicking-plugins thay vì tự viết code animation.

Nên dùng khi nào — và khi nào nên bỏ qua

Hãy chọn egjs Flicking nếu bạn cần carousel có vòng lặp circular, SSR trên Next.js hoặc Nuxt, hoặc virtual scroll cho danh sách panel dài, và muốn dùng chung một core cho dự án vanilla JS, React, và Vue 3. Bỏ qua nếu bạn cần hỗ trợ Angular cụ thể — bảng package trong README không có wrapper riêng cho Angular — hoặc nếu một carousel CSS scroll-snap đơn giản đã đủ cho số panel nhỏ, không cần các cơ chế này.

Repo liên quan