Flicking

Reliable, flexible and extendable carousel

naver/egjs-flicking naver.github.io/egjs-flicking/@egjs/flicking

README

@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

``` sh
$ 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.

``` html
<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

```ts
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

``` html
<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">
```

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

📦 Packages

|Package|Version|Description|

|:-----:|:-----:|:-----:|

|[**@egjs/flicking-plugins**](https://github.com/naver/egjs-flicking-plugins)|

|Readymade effects for your carousel||[**@egjs/ngx-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md)|

[Angular](https://angular.io/) port of @egjs/flicking||[**@egjs/react-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md)|

[React](https://reactjs.org/) port of @egjs/flicking||[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|

[Vue.js@2](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking||[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|

[Vue.js@3](https://v3.vuejs.org/) port of @egjs/flicking||[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|

[Preact](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking||[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|