@egjs/flicking

Demo / Documentation / Other components

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
📱💻🖥

Supported Frameworks

🖱️Click each images to see its source or check our full demos.

✨ Features

Use it in a framework you like.
- We supports all major JS frameworks like React, Vue, Angular
SSR(Server Side Rendering) ready
- You can use Flicking at your favorite SSR frameworks like Next.js or Nuxt.js.
Circular(Loop) Mode
Ready-to-use plugins you can grab right away.
- Autoplay, Fade effect, Parallax effect, ...
Restore state like position and active slide with persist
You can make native-scroll like UI with bound and moveType: freeScroll
Supports both Desktop & Mobile
Rich API
Supports IE9+ with the polyfill
- es6-polyfill

⚙️ Installation

npm

$ npm install --save @egjs/flicking

CDN

jsDelivr: https://cdn.jsdelivr.net/npm/@egjs/flicking/dist/
unpkg: https://unpkg.com/@egjs/flicking/dist/
cdnjs: https://cdnjs.com/libraries/egjs-flicking

🏃 Quick Start

HTML

Flicking requires minimal structure to initialize properly.

You don't need to consider this when using Flicking with the frameworks.

<div id="my-flicking" class="flicking-viewport">
  <div class="flicking-camera">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
  </div>
</div>

ES Modules

import Flicking from "@egjs/flicking";
// import styles
import "@egjs/flicking/dist/flicking.css"; // Supports IE10+, using CSS flex
// Or...
import "@egjs/flicking/dist/flicking.inline.css"; //Supports IE9+, using CSS inline-box

const flicking = new Flicking("#my-flicking", { circular: true });

With CDN

<!-- Packaged with all dependencies -->
<script src="https://unpkg.com/@egjs/flicking@4.0.0-beta.4/dist/flicking.pkgd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@egjs/flicking@4.0.0/dist/flicking.css">

var flicking = new Flicking("#my-flicking", { circular: true });

📦 Packages

Package	Version	Description
@egjs/flicking-plugins		Readymade effects for your carousel
@egjs/ngx-flicking		Angular port of @egjs/flicking
@egjs/react-flicking		React port of @egjs/flicking
@egjs/vue-flicking		Vue.js@2 port of @egjs/flicking
@egjs/vue3-flicking		Vue.js@3 port of @egjs/flicking
@egjs/preact-flicking		Preact port of @egjs/flicking
@egjs/svelte-flicking		Svelte port of @egjs/flicking