1 | <h1 align="center" style="max-width: 100%;">
|
2 | <img width="256" alt="Conveyer Logo" src="https://naver.github.io/egjs-conveyer/img/logo.png" style="max-width: 100%;" /><br/>
|
3 | <a href="https://naver.github.io/egjs-conveyer/">Conveyer</a>
|
4 | </h1>
|
5 |
|
6 | <p align="center" style="line-height: 2;">
|
7 | <a href="https://www.npmjs.com/package/@egjs/conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/conveyer.svg?style=flat-square&color=007acc&label=version&logo=NPM" alt="version" /></a>
|
8 | <a href="https://www.npmjs.com/package/@egjs/conveyer" target="_blank"><img alt="npm weekly downloads" src="https://img.shields.io/npm/dw/@egjs/conveyer?logo=npm&style=flat-square&color=007acc" /></a>
|
9 | <a href="https://www.npmjs.com/package/@egjs/conveyer" target="_blank"><img alt="npm bundle size (scoped)" src="https://img.shields.io/bundlephobia/minzip/@egjs/conveyer.svg?style=flat-square&label=%F0%9F%92%BE%20gzipped&color=007acc" /></a>
|
10 | <a href="https://github.com/naver/egjs-conveyer/actions" target="_blank"><img alt="Github actions" src="https://img.shields.io/github/workflow/status/naver/egjs-conveyer/Run%20tests?style=flat-square" /></a>
|
11 | <a href="https://coveralls.io/github/naver/egjs-conveyer?branch=master&style=flat-square" target="_blank"><img alt="Coveralls github" src="https://img.shields.io/coveralls/github/naver/egjs-conveyer.svg?style=flat-square&label=%E2%9C%85%20coverage" /></a>
|
12 | <a href="https://github.com/naver/egjs-conveyer/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/static/v1?style=flat-square&label=%F0%9F%93%9C%20license&message=MIT&color=08CE5D" /></a>
|
13 | <img src="https://img.shields.io/static/v1.svg?label=&message=TypeScript&color=294E80&style=flat-square&logo=typescript" />
|
14 | </p>
|
15 | <p align="center" style="line-height: 2;">
|
16 | <a href="https://github.com/naver/egjs-conveyer/blob/main/packages/ngx-conveyer/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>
|
17 | <a href="https://github.com/naver/egjs-conveyer/blob/main/packages/react-conveyer/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>
|
18 | <a href="https://github.com/naver/egjs-conveyer/blob/main/packages/vue-conveyer/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue3&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a>
|
19 | <a href="https://github.com/naver/egjs-conveyer/blob/main/packages/vue2-conveyer/README.md" target="_blank"><img alt="Vue" src="https://img.shields.io/static/v1.svg?label=&message=Vue2&style=flat-square&logo=Vue.js&logoColor=white&color=42b883" /></a>
|
20 | <a href="https://github.com/naver/egjs-conveyer/blob/main/packages/svelte-conveyer/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>
|
21 |
|
22 | </p>
|
23 |
|
24 | <h3 align="center">
|
25 | <a href="https://naver.github.io/egjs-conveyer/">Demo</a> / <a href="https://naver.github.io/egjs-conveyer/docs/api/Conveyer">Documentation</a> / <a href="https://naver.github.io/egjs/"><img height="20" src="https://naver.github.io/egjs/img/logo.svg"/> Other components</a>
|
26 | </h3>
|
27 |
|
28 | <p align="center">
|
29 | <b>Conveyer adds Drag gestures to your Native Scroll.</b><br />📱💻🖥
|
30 | </p>
|
31 |
|
32 |
|
33 | -----
|
34 |
|
35 | ## ✨ Features
|
36 | - You can use Native Scroll-like behavior through Drag.
|
37 | - By adding easing features such as bounce, elasticity, and back, you can create smooth scrolling animations like Native Scroll.
|
38 | - Supports Reactive Properties that can change state through properties that automatically detect changes instead of events.
|
39 | - You can use custom scroll events like onBeginScroll, onFinishScroll, onReachStart, onLeaveStart,
|
40 |
|
41 | ## ⚙️ Installation
|
42 | #### npm
|
43 | ```bash
|
44 | $ npm install --save @egjs/conveyer
|
45 | ```
|
46 |
|
47 | #### CDN
|
48 | - unpkg: https://unpkg.com/@egjs/conveyer/dist/
|
49 |
|
50 | ## 🏃 Quick Start
|
51 | #### HTML
|
52 |
|
53 | ```html
|
54 | <div class="items">
|
55 | <div class="item"></div>
|
56 | <div class="item"></div>
|
57 | <div class="item"></div>
|
58 | <div class="item"></div>
|
59 | </div>
|
60 | ```
|
61 | #### ES Modules
|
62 | ```ts
|
63 | import Conveyer from "@egjs/conveyer";
|
64 |
|
65 | const conveyer = new Conveyer(".items");
|
66 | ```
|
67 |
|
68 | #### With CDN
|
69 | ```html
|
70 | <!-- Packaged with all dependencies -->
|
71 | <!-- https://naver.github.io/egjs-conveyer/release/latest/dist/conveyer.min.js -->
|
72 | <script src="https://unpkg.com/@egjs/conveyer/dist/conveyer.min.js"></script>
|
73 | <script>
|
74 | const conveyer = new Conveyer(".items");
|
75 | </script>
|
76 | ```
|
77 | ## How to use
|
78 | #### HTML
|
79 | ```html
|
80 | <button class="prev">prev</button>
|
81 | <button class="next">next</button>
|
82 | <div class="items">
|
83 | <div class="item"></div>
|
84 | <div class="item"></div>
|
85 | <div class="item"></div>
|
86 | <div class="item"></div>
|
87 | </div>
|
88 | ```
|
89 | #### JS
|
90 | ```js
|
91 | import Conveyer from "@egjs/conveyer";
|
92 |
|
93 | // Since events occur during initialization, set `autoInit` to false if you want to register events.
|
94 | const conveyer = new Conveyer(".items", {
|
95 | autoInit: false,
|
96 | });
|
97 |
|
98 | const prev = document.querySelector(".prev");
|
99 | const next = document.querySelector(".next");
|
100 |
|
101 | prev.addEventListener("click", () => {
|
102 | // start to end
|
103 | conveyer.scrollIntoView("start", {
|
104 | align: "end",
|
105 | duration: 500,
|
106 | excludeStand: true,
|
107 | });
|
108 | });
|
109 | next.addEventListener("click", () => {
|
110 | // end to start
|
111 | conveyer.scrollIntoView("end", {
|
112 | align: "start",
|
113 | duration: 500,
|
114 | excludeStand: true,
|
115 | });
|
116 | });
|
117 | conveyer.subscribe("isReachStart", value => {
|
118 | prev.disabled = value;
|
119 | });
|
120 | conveyer.subscribe("isReachEnd", value => {
|
121 | next.disabled = value;
|
122 | });
|
123 |
|
124 | conveyer.init();
|
125 | ```
|
126 |
|
127 | ## 📦 Packages
|
128 | |Package|Version|Description|
|
129 | |:-----:|:-----:|:-----:|
|
130 | |[**@egjs/ngx-conveyer**](https://github.com/naver/egjs-conveyer/blob/main/packages/ngx-conveyer/README.md)|<a href="https://www.npmjs.com/package/@egjs/ngx-conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/ngx-conveyer.svg?style=flat-square&color=dd0031&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-conveyer/img/icons/angular.svg" valign="middle" alt="Angular" /> [Angular](https://angular.io/) port of @egjs/conveyer|
|
131 | |[**@egjs/react-conveyer**](https://github.com/naver/egjs-conveyer/blob/main/packages/react-conveyer/README.md)|<a href="https://www.npmjs.com/package/@egjs/react-conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/react-conveyer.svg?style=flat-square&color=00d8ff&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-conveyer/img/icons/react.svg" valign="middle" alt="React" /> [React](https://reactjs.org/) port of @egjs/conveyer|
|
132 | |[**@egjs/vue-conveyer**](https://github.com/naver/egjs-conveyer/blob/main/packages/vue-conveyer/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue-conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue-conveyer.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-conveyer/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@3](https://vuejs.org/v2/guide/index.html) port of @egjs/conveyer|
|
133 | |[**@egjs/vue2-conveyer**](https://github.com/naver/egjs-conveyer/blob/main/packages/vue2-conveyer/README.md)|<a href="https://www.npmjs.com/package/@egjs/vue2-conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/vue2-conveyer.svg?style=flat-square&color=42b883&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-conveyer/img/icons/vue.svg" valign="middle" alt="Vue.js" /> [Vue.js@2](https://v3.vuejs.org/) port of @egjs/conveyer|
|
134 | |[**@egjs/svelte-conveyer**](https://github.com/naver/egjs-conveyer/blob/main/packages/svelte-conveyer/README.md)|<a href="https://www.npmjs.com/package/@egjs/svelte-conveyer" target="_blank"><img src="https://img.shields.io/npm/v/@egjs/svelte-conveyer.svg?style=flat-square&color=FF3E00&label=%F0%9F%94%96" alt="version" /></a>|<img width="15" src="https://naver.github.io/egjs-conveyer/img/icons/svelte.svg" valign="middle" alt="Svelte" /> [Svelte](https://svelte.dev/) port of @egjs/conveyer|
|
135 |
|
136 | ## 🌐 Supported Browsers
|
137 | |<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" />|
|
138 | |:---:|:---:|:---:|:---:|:---:|:---:|
|
139 | |9+(With polyfill), 11+ for Angular & Svelte|Latest|Latest|Latest|7+|4+|
|
140 |
|
141 | ## 📼 Demos
|
142 | Check our [Demos](https://naver.github.io/egjs-conveyer/).
|
143 |
|
144 | ## 📖 Documentation
|
145 | See [Documentation](https://naver.github.io/egjs-conveyer/docs/api/Conveyer) page.
|
146 |
|
147 | ## 🙌 Contributing
|
148 | See [CONTRIBUTING.md](https://github.com/naver/egjs-conveyer/blob/main/CONTRIBUTING.md).
|
149 |
|
150 | ## 📝 Feedback
|
151 | Please file an [Issue](https://github.com/naver/egjs-conveyer/issues).
|
152 |
|
153 |
|
154 | ## 📜 License
|
155 | @egjs/conveyer is released under the [MIT license](LICENSE).
|
156 |
|
157 | ```
|
158 | Copyright (c) 2022-present NAVER Corp.
|
159 |
|
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 |
|
167 | The above copyright notice and this permission notice shall be included in
|
168 | all copies or substantial portions of the Software.
|
169 |
|
170 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
171 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
172 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
173 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
174 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
175 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
176 | THE SOFTWARE.
|
177 | ```
|
178 |
|
179 | <p align="center">
|
180 | <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>
|
181 | </p>
|
182 |
|