egjs-flicking

<h1 align="center" style="max-width: 100%;"> <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/> <a href="https://naver.github.io/egjs-flicking/">@egjs/flicking</a> </h1> <p align="center" style="line-height: 2;"> <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a> <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/flicking.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a> <a href="https://coveralls.io/github/naver/egjs-flicking?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-flicking.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a> <a href="https://deepscan.io/dashboard#view=project&tid=3998&pid=5802&bid=46086"><img src="https://flat.badgen.net/deepscan/grade/team/3998/project/5802/branch/46086" alt="DeepScan grade" /></a> </p> <p align="center" style="line-height: 2;"> <a href="https://github.com/naver/egjs-flicking/graphs/commit-activity"> <img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/m/naver/egjs-flicking.svg?color=08CE5D&label=%E2%AC%86%20commits&style=flat-square" /></a> <a href="https://www.npmjs.com/package/@egjs/flicking" target="_blank"><img src="https://img.shields.io/npm/dm/@egjs/flicking.svg?style=flat-square&label=%E2%AC%87%20downloads&color=08CE5D" alt="npm downloads per month" /></a> <a href="https://github.com/naver/egjs-flicking/graphs/contributors" target="_blank"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/naver/egjs-flicking.svg?label=%F0%9F%91%A5%20contributors&style=flat-square&color=08CE5D" /></a> <a href="https://github.com/naver/egjs-flicking/blob/master/LICENSE" target="_blank"><img alt="GitHub" src="https://img.shields.io/github/license/naver/egjs-flicking.svg?style=flat-square&label=%F0%9F%93%9C%20license&color=08CE5D" /></a> </p> <p align="center" style="line-height: 2;"> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md" target="_blank"><img alt="Angular" src="https://img.shields.io/static/v1.svg?label=&message=Angular&style=flat-square&logo=Angular&color=dd0031" /></a> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md" target="_blank"><img alt="React" src="https://img.shields.io/static/v1.svg?label=&message=React&style=flat-square&logo=React&logoColor=white&color=61dafb" /></a> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md" target="_blank"><img alt="Preact" src="https://img.shields.io/static/v1.svg?label=&message=Preact&style=flat-square&logo=Preact&logoColor=white&color=673ab8" /></a> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md" target="_blank"><img alt="Svelte" src="https://img.shields.io/static/v1.svg?label=&message=Svelte&style=flat-square&logo=svelte&logoColor=white&color=FF3E00" /></a> <img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" /> </p> <h3 align="center"> <a href="https://naver.github.io/egjs-flicking/">Demo</a> / <a href="https://naver.github.io/egjs-flicking/docs/api/Flicking">Documentation</a> / <a href="https://naver.github.io/egjs/"><img height="20" src="https://naver.github.io/egjs/img/logo.svg"/> Other components</a> </h3> <p align="center"> <b>Everyday 30 million people experience. It's reliable, flexible and extendable carousel.</b><br />📱💻🖥 </p> <p align="center"> <b>Supported Frameworks</b><br/> <a href="https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" alt="AngularJS" /></a>   <a href="https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" alt="React" /></a>   <a href="https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" alt="Vue.js" /></a>   <a href="https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" alt="Preact" /></a>   <a href="https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md"><img width="45" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" alt="Svelte" /></a> </p>

<table style="table-layout: fixed; overflow-wrap: break-word;"> <tbody> <tr> <td><a href="https://codepen.io/egjs/pen/vqYyPO" target="_blank"><img width="240" src="https://user-images.githubusercontent.com/26213435/59833703-a2a07600-9381-11e9-8d3e-b1d2af8b1b96.gif" alt="iPhone demo" style="max-width: 100%;" /></a></td> <td><a href="https://codepen.io/woodneck/pen/ydNvYy" target="_blank"><img width="240" src="https://user-images.githubusercontent.com/26213435/59832836-cf538e00-937f-11e9-9e65-ec43c1bde5de.gif" alt="Music app demo" style="max-width: 100%;" /></a></td> <td rowspan="2" style="vertical-align: middle;"><a href="https://codepen.io/egjs/full/MMYQRE" target="_blank"><img width="480" src="https://user-images.githubusercontent.com/26213435/59832834-cf538e00-937f-11e9-8f3a-97e806bb37b1.gif" alt="Full page demo" style="max-width: 100%;" /></a></td> </tr> <tr> <td colspan="2"><a href="https://codepen.io/egjs/pen/vqYjrr" target="_blank"><img width="480" src="https://user-images.githubusercontent.com/26213435/59832835-cf538e00-937f-11e9-99a5-10f24da4c242.gif" alt="Parallax demo" style="max-width: 100%;" /></a></td> </tr> </tbody> </table> <h6 align="center"> 🖱️Click each images to see its source or check our <a href="https://naver.github.io/egjs-flicking/">full demos</a>. </h6>

✨ 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	<a href="https://www.npmjs.com/package/@egjs/flicking-plugins" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat-square&color=007acc&label=%F0%9F%94%96" alt="version" /></a>	Readymade effects for your carousel
@egjs/ngx-flicking	<a href="https://www.npmjs.com/package/@egjs/ngx-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-flicking.svg?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/angular.svg" valign="middle" alt="Angular" /> Angular port of @egjs/flicking
@egjs/react-flicking	<a href="https://www.npmjs.com/package/@egjs/react-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-flicking.svg?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/react.svg" valign="middle" alt="React" /> React port of @egjs/flicking
@egjs/vue-flicking	<a href="https://www.npmjs.com/package/@egjs/vue-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> Vue.js@2 port of @egjs/flicking
@egjs/vue3-flicking	<a href="https://www.npmjs.com/package/@egjs/vue3-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue3-flicking.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/vue.svg" valign="middle" alt="Vue.js" /> Vue.js@3 port of @egjs/flicking
@egjs/preact-flicking	<a href="https://www.npmjs.com/package/@egjs/preact-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/preact-flicking.svg?style=flat-square&color=673ab8&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/preact.svg" valign="middle" alt="Preact" /> Preact port of @egjs/flicking
@egjs/svelte-flicking	<a href="https://www.npmjs.com/package/@egjs/svelte-flicking" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-flicking.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>	<img width="15" src="https://naver.github.io/egjs-flicking/img/icons/svelte.svg" valign="middle" alt="Svelte" /> Svelte port of @egjs/flicking

🌐 Supported Browsers

|<img width="20" src="https://simpleicons.org/icons/internetexplorer.svg" alt="IE" />|<img width="20" src="https://simpleicons.org/icons/googlechrome.svg" alt="Chrome" />|<img width="20" src="https://simpleicons.org/icons/firefoxbrowser.svg" alt="Firefox" />|<img width="20" src="https://simpleicons.org/icons/safari.svg" alt="Safari"