egjs Flicking: A JavaScript Carousel Component

Introducing egjs Flicking

@egjs/flicking is an open-source JavaScript carousel component built by NAVER, with core, React, and Vue 3 packages published separately. The README lists circular mode for looping, free scroll for momentum-based native scrolling, and virtual scroll that renders only visible panels. It's written in TypeScript with a fully typed API, and NAVER documents SSR support for Next.js and Nuxt.

Core Features of Flicking

• ✓Circular mode loops panels continuously without a visible jump at the wrap-around point.
• ✓Free scroll gives momentum-based native scrolling instead of only snapping fixed to each panel.
• ✓Virtual scroll renders only the panels currently visible, aimed at large panel counts.
• ✓SSR ready — the README lists compatibility with Next.js and Nuxt.
• ✓A separate @egjs/flicking-plugins package adds AutoPlay, Fade, Parallax, Arrow, and Pagination without bloating the core bundle.
• ✓Written in TypeScript with a fully typed API.
• ✓Dedicated @egjs/react-flicking and @egjs/vue3-flicking packages wrap the core library for React and Vue 3 respectively.
• ✓Distributed via npm and three CDNs (jsDelivr, unpkg, cdnjs) for non-bundled use.

Installation and Setup

Install the core package with `npm install --save @egjs/flicking`, then import the CSS alongside the JS import — the README's ES Modules example imports both `@egjs/flicking` and `@egjs/flicking/dist/flicking.css`. If you're not using a bundler, the README lists three CDNs: jsDelivr, unpkg, and cdnjs, plus a pre-packaged `flicking.pkgd.min.js` build for the plain-script-tag case. React and Vue 3 projects install the separate `@egjs/react-flicking` or `@egjs/vue3-flicking` packages instead of wrapping the core package by hand.

Quick Start with Flicking

The README's quick-start initializes Flicking against a container element: `import Flicking from "@egjs/flicking"; import "@egjs/flicking/dist/flicking.css"; const flicking = new Flicking("#my-flicking", { circular: true });`. It notes the HTML structure requirement only matters when you're not using one of the framework wrappers — React and Vue 3 projects skip manual DOM setup and use the `@egjs/react-flicking` or `@egjs/vue3-flicking` components instead. The CDN path mirrors this: load `flicking.pkgd.min.js` and the CSS via script/link tags, then call `new Flicking(...)` the same way.

Other Carousel Libraries

Common Questions

The problem it solves

Most homegrown carousel code handles a handful of slides fine, then jumps or stutters once you add circular looping or once the panel count grows into the hundreds and every panel stays mounted in the DOM. @egjs/flicking's README addresses both: a circular mode that loops without a visible seam at the wrap-around point, and a virtual-scroll mode that renders only the panels currently on screen. It also documents SSR support for Next.js and Nuxt instead of leaving server rendering as an afterthought, which matters if the carousel sits above the fold on a page that needs to be indexed.

Best use cases

• •Building a product carousel or hero banner in a Next.js or Nuxt app where SSR needs to produce real markup, not a client-only mount.
• •Rendering a panel list that runs into the hundreds — a media gallery or catalog grid — where virtual scroll keeps the DOM from bloating.
• •Adding a circular, infinite-loop carousel without hand-writing wrap-around logic yourself.
• •Sharing one carousel implementation across a React app and a Vue 3 app via the separate @egjs/react-flicking and @egjs/vue3-flicking packages instead of maintaining two.
• •Layering effects like AutoPlay, Fade, or Parallax onto the base carousel through the @egjs/flicking-plugins package rather than writing custom animation code.

Who should try it — and who should skip

Reach for egjs Flicking if you're building a carousel that needs circular looping, SSR in Next.js or Nuxt, or virtual rendering for a long panel list, and you want the same core across vanilla JS, React, and Vue 3 projects. Skip it if you need Angular support specifically — the README's package table doesn't list a dedicated Angular wrapper — or if a plain CSS scroll-snap carousel already covers a simple, small panel count without any of this machinery.

Related repositories