1 | <h1 align="center" style="max-width: 100%;">
|
2 | <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/>
|
3 | <a href="https://naver.github.io/egjs-flicking/">@egjs/flicking</a>
|
4 | </h1>
|
5 |
|
6 | <p align="center" style="line-height: 2;">
|
7 | <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>
|
8 | <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>
|
9 | <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>
|
10 | <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>
|
11 | </p>
|
12 | <p align="center" style="line-height: 2;">
|
13 | <a href="https://github.com/naver/egjs-flicking/graphs/commit-activity">
|
14 | <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>
|
15 | <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>
|
16 | <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>
|
17 | <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>
|
18 | </p>
|
19 | <p align="center" style="line-height: 2;">
|
20 | <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>
|
21 | <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>
|
22 | <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>
|
23 | <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>
|
24 | <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>
|
25 | <img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" />
|
26 | </p>
|
27 |
|
28 | <h3 align="center">
|
29 | <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>
|
30 | </h3>
|
31 |
|
32 | <p align="center">
|
33 | <b>Everyday 30 million people experience. It's reliable, flexible and extendable carousel.</b><br />📱💻🖥
|
34 | </p>
|
35 |
|
36 | <p align="center">
|
37 | <b>Supported Frameworks</b><br/>
|
38 | <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>
|
39 | <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>
|
40 | <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>
|
41 | <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>
|
42 | <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>
|
43 | </p>
|
44 |
|
45 | -----
|
46 | <table style="table-layout: fixed; overflow-wrap: break-word;">
|
47 | <tbody>
|
48 | <tr>
|
49 | <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>
|
50 | <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>
|
51 | <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>
|
52 | </tr>
|
53 | <tr>
|
54 | <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>
|
55 | </tr>
|
56 | </tbody>
|
57 | </table>
|
58 | <h6 align="center">
|
59 | 🖱️Click each images to see its source or check our <a href="https://naver.github.io/egjs-flicking/">full demos</a>.
|
60 | </h6>
|
61 |
|
62 | ## ✨ Features
|
63 | - Use it in a framework you like.
|
64 | - We supports all major JS frameworks like React, Vue, Angular
|
65 | - SSR(Server Side Rendering) ready
|
66 | - You can use Flicking at your favorite SSR frameworks like [Next.js](https://nextjs.org/) or [Nuxt.js](https://nuxtjs.org/).
|
67 | - Circular(Loop) Mode
|
68 | - Ready-to-use plugins you can grab right away.
|
69 | - Autoplay, Fade effect, Parallax effect, ...
|
70 | - Restore state like position and active slide with [persist](https://naver.github.io/egjs-persist/)
|
71 | - You can make native-scroll like UI with `bound` and `moveType: freeScroll`
|
72 | - Supports both Desktop & Mobile
|
73 | - Rich API
|
74 | - Supports IE9+ with the polyfill
|
75 | - [es6-polyfill](https://cdn.jsdelivr.net/npm/es6-promise@latest/dist/es6-promise.auto.js)
|
76 |
|
77 | ## ⚙️ Installation
|
78 | #### npm
|
79 | ```bash
|
80 | $ npm install --save @egjs/flicking
|
81 | ```
|
82 |
|
83 | #### CDN
|
84 | - jsDelivr: https://cdn.jsdelivr.net/npm/@egjs/flicking/dist/
|
85 | - unpkg: https://unpkg.com/@egjs/flicking/dist/
|
86 | - cdnjs: https://cdnjs.com/libraries/egjs-flicking
|
87 |
|
88 | ## 🏃 Quick Start
|
89 | #### HTML
|
90 | Flicking requires minimal structure to initialize properly.
|
91 | > You don't need to consider this when using Flicking with the frameworks.
|
92 |
|
93 | ```html
|
94 | <div id="my-flicking" class="flicking-viewport">
|
95 | <div class="flicking-camera">
|
96 | <div class="panel"></div>
|
97 | <div class="panel"></div>
|
98 | <div class="panel"></div>
|
99 | </div>
|
100 | </div>
|
101 | ```
|
102 |
|
103 | #### ES Modules
|
104 | ```ts
|
105 | import Flicking from "@egjs/flicking";
|
106 | // import styles
|
107 | import "@egjs/flicking/dist/flicking.css"; // Supports IE10+, using CSS flex
|
108 | // Or...
|
109 | import "@egjs/flicking/dist/flicking.inline.css"; //Supports IE9+, using CSS inline-box
|
110 |
|
111 | const flicking = new Flicking("#my-flicking", { circular: true });
|
112 | ```
|
113 |
|
114 | #### With CDN
|
115 | ```html
|
116 | <!-- Packaged with all dependencies -->
|
117 | <script src="https://unpkg.com/@egjs/flicking@4.0.0-beta.4/dist/flicking.pkgd.min.js"></script>
|
118 | <link rel="stylesheet" href="https://unpkg.com/@egjs/flicking@4.0.0/dist/flicking.css">
|
119 | ```
|
120 | ```js
|
121 | var flicking = new Flicking("#my-flicking", { circular: true });
|
122 | ```
|
123 |
|
124 | ## 📦 Packages
|
125 | |Package|Version|Description|
|
126 | |:-----:|:-----:|:-----:|
|
127 | |[**@egjs/flicking-plugins**](https://github.com/naver/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|
|
128 | |[**@egjs/ngx-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/ngx-flicking/README.md)|<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](https://angular.io/) port of @egjs/flicking|
|
129 | |[**@egjs/react-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/react-flicking/README.md)|<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](https://reactjs.org/) port of @egjs/flicking|
|
130 | |[**@egjs/vue-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue-flicking/README.md)|<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](https://vuejs.org/v2/guide/index.html) port of @egjs/flicking|
|
131 | |[**@egjs/vue3-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/vue3-flicking/README.md)|<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](https://v3.vuejs.org/) port of @egjs/flicking|
|
132 | |[**@egjs/preact-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/preact-flicking/README.md)|<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](https://preactjs.com/guide/v10/getting-started) port of @egjs/flicking|
|
133 | |[**@egjs/svelte-flicking**](https://github.com/naver/egjs-flicking/blob/master/packages/svelte-flicking/README.md)|<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](https://svelte.dev/) port of @egjs/flicking|
|
134 |
|
135 | ## 🌐 Supported Browsers
|
136 | |<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" />|<img width="20" src="https://simpleicons.org/icons/apple.svg" alt="iOS" />|<img width="20" src="https://simpleicons.org/icons/android.svg" alt="Android" />|
|
137 | |:---:|:---:|:---:|:---:|:---:|:---:|
|
138 | |9+(With polyfill), 11+ for Angular & Svelte|Latest|Latest|Latest|7+|4+|
|
139 |
|
140 | ## 📼 Demos
|
141 | Check our [Demos](https://naver.github.io/egjs-flicking/).
|
142 |
|
143 | ## 📖 Documentation
|
144 | See [Documentation](https://naver.github.io/egjs-flicking/release/latest/doc/index.html) page.
|
145 |
|
146 | ## 🙌 Contributing
|
147 | See [CONTRIBUTING.md](https://github.com/naver/egjs-flicking/blob/master/CONTRIBUTING.md).
|
148 |
|
149 | ## 📝 Feedback
|
150 | Please file an [Issue](https://github.com/naver/egjs-flicking/issues).
|
151 |
|
152 | ## 🛣️ Roadmap
|
153 | See our [Roadmap](https://github.com/naver/egjs-flicking/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%F0%9F%9B%A3%EF%B8%8FRoadmap+).
|
154 |
|
155 | ## 📜 License
|
156 | @egjs/flicking is released under the [MIT license](https://github.com/naver/egjs-flicking/blob/master/LICENSE).
|
157 |
|
158 | ```
|
159 | Copyright (c) 2015-present NAVER Corp.
|
160 | Permission is hereby granted, free of charge, to any person obtaining a copy
|
161 | of this software and associated documentation files (the "Software"), to deal
|
162 | in the Software without restriction, including without limitation the rights
|
163 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
164 | copies of the Software, and to permit persons to whom the Software is
|
165 | furnished to do so, subject to the following conditions:
|
166 | The above copyright notice and this permission notice shall be included in
|
167 | all copies or substantial portions of the Software.
|
168 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
169 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
170 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
171 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
172 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
173 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
174 | THE SOFTWARE.
|
175 | ```
|
176 |
|
177 | <p align="center">
|
178 | <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" /></a> <a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
|
179 | </p>
|