@egjs/flicking-plugins 4.8.0-beta.1 → 4.8.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/README.md +42 -51
  2. package/css/all.css +2 -0
  3. package/css/arrow.css +2 -2
  4. package/css/pagination.css +5 -3
  5. package/declaration/Arrow.d.ts +106 -51
  6. package/declaration/AutoPlay.d.ts +104 -44
  7. package/declaration/Fade.d.ts +41 -16
  8. package/declaration/Parallax.d.ts +41 -16
  9. package/declaration/Perspective.d.ts +71 -28
  10. package/declaration/Sync.d.ts +93 -37
  11. package/declaration/const.d.ts +31 -31
  12. package/declaration/event.d.ts +5 -5
  13. package/declaration/index.d.ts +13 -10
  14. package/declaration/pagination/Pagination.d.ts +141 -61
  15. package/declaration/pagination/index.d.ts +3 -3
  16. package/declaration/pagination/renderer/BulletRenderer.d.ts +11 -11
  17. package/declaration/pagination/renderer/FractionRenderer.d.ts +9 -9
  18. package/declaration/pagination/renderer/Renderer.d.ts +19 -19
  19. package/declaration/pagination/renderer/ScrollBulletRenderer.d.ts +12 -12
  20. package/declaration/tsdoc-metadata.json +11 -0
  21. package/declaration/type.d.ts +9 -9
  22. package/declaration/utils.d.ts +3 -3
  23. package/dist/arrow.css +2 -2
  24. package/dist/flicking-plugins.css +23 -8
  25. package/dist/flicking-plugins.min.css +1 -1
  26. package/dist/pagination.css +21 -6
  27. package/dist/pagination.min.css +1 -1
  28. package/dist/plugins.esm.js +1030 -1591
  29. package/dist/plugins.esm.js.map +1 -1
  30. package/dist/plugins.js +1047 -1620
  31. package/dist/plugins.js.map +1 -1
  32. package/dist/plugins.min.js +1 -9
  33. package/dist/plugins.min.js.map +1 -1
  34. package/package.json +49 -105
  35. package/src/Arrow.ts +133 -82
  36. package/src/AutoPlay.ts +105 -35
  37. package/src/Fade.ts +31 -11
  38. package/src/Parallax.ts +31 -11
  39. package/src/Perspective.ts +69 -22
  40. package/src/Sync.ts +69 -25
  41. package/src/index.ts +9 -22
  42. package/src/pagination/Pagination.ts +163 -40
  43. package/src/pagination/index.ts +2 -6
  44. package/src/pagination/renderer/BulletRenderer.ts +1 -4
  45. package/src/pagination/renderer/FractionRenderer.ts +1 -3
  46. package/src/pagination/renderer/Renderer.ts +14 -13
  47. package/src/pagination/renderer/ScrollBulletRenderer.ts +5 -12
  48. package/CONTRIBUTING +0 -58
  49. package/rollup.config.dev.js +0 -17
  50. package/rollup.config.js +0 -33
  51. package/tsconfig.declaration.json +0 -10
  52. package/tsconfig.eslint.json +0 -8
  53. package/tsconfig.json +0 -17
  54. package/tsconfig.test.json +0 -21
package/README.md CHANGED
@@ -1,75 +1,66 @@
1
- # @egjs/flicking-plugins [![version][badge-version]][link-version] <a href="https://travis-ci.org/naver/egjs-flicking-plugins" target="_blank"><img alt="Travis (.org)" src="https://img.shields.io/travis/naver/egjs-flicking-plugins.svg?style=flat-square&label=build&logo=travis%20ci" /></a> [![Coverage Status](https://coveralls.io/repos/github/naver/egjs-flicking-plugins/badge.svg?branch=master)](https://coveralls.io/github/naver/egjs-flicking-plugins?branch=master)
1
+ # @egjs/flicking-plugins
2
2
 
3
+ > Part of the [@egjs/flicking](https://github.com/naver/egjs-flicking) monorepo.
3
4
 
4
5
  <h1 align="center" style="max-width: 100%;">
5
6
  <img width="800" alt="Flicking Logo" src="https://naver.github.io/egjs-flicking/images/flicking.svg" style="max-width: 100%;" /><br/>
6
7
  <a href="https://naver.github.io/egjs-flicking/Plugins">@egjs/flicking-plugins</a>
7
8
  </h1>
8
9
 
9
- Ready to use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
10
- - [Demos & Documents](https://naver.github.io/egjs-flicking/Plugins)
11
- - [AutoPlay](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
12
- - [Parallax](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
13
- - [Fade](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
14
- - [Arrow](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
15
- - [Pagination](https://naver.github.io/egjs-flicking/Plugins#pagination): Add a pagination bullets to Flicking.
10
+ Ready-to-use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
11
+
12
+ ## Available Plugins
13
+
14
+ - [**AutoPlay**](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
15
+ - [**Parallax**](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
16
+ - [**Fade**](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
17
+ - [**Perspective**](https://naver.github.io/egjs-flicking/Plugins#perspective): Add 3D perspective effect.
18
+ - [**Sync**](https://naver.github.io/egjs-flicking/Plugins#sync): Synchronize multiple Flicking instances.
19
+ - [**Arrow**](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
20
+ - [**Pagination**](https://naver.github.io/egjs-flicking/Plugins#pagination): Add pagination bullets to Flicking.
16
21
 
17
22
  ## ⚙️ Installation
18
- #### npm
23
+
24
+ ### npm
19
25
  ```bash
20
26
  npm install @egjs/flicking-plugins
21
27
  ```
22
28
 
23
- #### CDN
24
- - **Latest**
25
- - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.js (all)
26
- - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.min.js (all)
27
- - **Specific version**
28
- - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.js (all)
29
- - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.min.js (all)
29
+ ### CDN
30
+ ```html
31
+ <!-- All plugins -->
32
+ <script src="https://unpkg.com/@egjs/flicking-plugins/dist/plugins.js"></script>
30
33
 
31
- ## 🏃 Quick Start
32
- ```js
33
- import { Fade, Parallax, AutoPlay } from "@egjs/flicking-plugins";
34
-
35
- flicking.addPlugins(new Fade(), new Parallax(), new AutoPlay());
34
+ <!-- Specific version -->
35
+ <script src="https://unpkg.com/@egjs/flicking-plugins@VERSION/dist/plugins.js"></script>
36
36
  ```
37
37
 
38
- ## 📝 Feedback
39
- Please file an [Issue](https://github.com/naver/egjs-flicking/issues).
38
+ ## 📖 Documentation
39
+
40
+ Full documentation: [https://naver.github.io/egjs-flicking/Plugins](https://naver.github.io/egjs-flicking/Plugins)
41
+
42
+ ## 💻 Development
40
43
 
41
- ## 📜 License
42
- egjs-flicking-plugins is released under the [MIT license](http://naver.github.io/egjs/license.txt).
44
+ This package is part of the [egjs-flicking monorepo](https://github.com/naver/egjs-flicking). See the root README for development instructions.
43
45
 
46
+ ### Building
47
+ ```bash
48
+ pnpm build
44
49
  ```
45
- Copyright (c) 2019-present NAVER Corp.
46
-
47
- Permission is hereby granted, free of charge, to any person obtaining a copy
48
- of this software and associated documentation files (the "Software"), to deal
49
- in the Software without restriction, including without limitation the rights
50
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
51
- copies of the Software, and to permit persons to whom the Software is
52
- furnished to do so, subject to the following conditions:
53
-
54
- The above copyright notice and this permission notice shall be included in
55
- all copies or substantial portions of the Software.
56
-
57
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
58
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
59
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
60
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
61
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
62
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
63
- THE SOFTWARE.
50
+
51
+ ### Testing
52
+ ```bash
53
+ pnpm test
64
54
  ```
65
55
 
66
- <p align="center">
67
- <a href="https://naver.github.io/egjs/"><img height="50" src="https://naver.github.io/egjs/img/logotype1_black.svg" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/naver"><img height="50" src="https://naver.github.io/OpenSourceGuide/book/assets/naver_logo.png" /></a>
68
- </p>
56
+ ## 📝 License
57
+
58
+ MIT License
59
+
60
+ Copyright (c) 2015-present NAVER Corp.
69
61
 
62
+ See [LICENSE](../../LICENSE) for details.
70
63
 
71
- <!-- badges -->
72
- [badge-version]: https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat
64
+ ## 🙌 Contributing
73
65
 
74
- <!-- links -->
75
- [link-version]: https://www.npmjs.com/package/@egjs/flicking-plugins
66
+ See [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines.
package/css/all.css ADDED
@@ -0,0 +1,2 @@
1
+ @import "./arrow.css";
2
+ @import "./pagination.css";
package/css/arrow.css CHANGED
@@ -90,11 +90,11 @@
90
90
  .flicking-arrow-prev.is-thin::before,
91
91
  .flicking-arrow-prev.is-thin::after,
92
92
  .flicking-arrow-next.is-thin::before,
93
- .flicking-arrow-next.is-thin::after{
93
+ .flicking-arrow-next.is-thin::after {
94
94
  height: 3px;
95
95
  }
96
96
 
97
97
  .flicking-arrow-prev.is-thin::after,
98
- .flicking-arrow-next.is-thin::after{
98
+ .flicking-arrow-next.is-thin::after {
99
99
  top: calc(50% - 2px);
100
100
  }
@@ -20,7 +20,7 @@
20
20
  }
21
21
 
22
22
  .flicking-pagination-scroll .flicking-pagination-slider {
23
- transition: .2s transform;
23
+ transition: 0.2s transform;
24
24
  }
25
25
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider,
26
26
  .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet {
@@ -41,7 +41,7 @@
41
41
  .flicking-pagination-scroll .flicking-pagination-bullet {
42
42
  vertical-align: middle;
43
43
  position: relative;
44
- transition: .2s transform;
44
+ transition: 0.2s transform;
45
45
  }
46
46
 
47
47
  .flicking-pagination-bullet-active {
@@ -51,7 +51,9 @@
51
51
  .flicking-pagination-scroll .flicking-pagination-bullet {
52
52
  vertical-align: middle;
53
53
  position: relative;
54
- transition: .2s transform,.2s left;
54
+ transition:
55
+ 0.2s transform,
56
+ 0.2s left;
55
57
  transform: scale(0);
56
58
  }
57
59
 
@@ -1,51 +1,106 @@
1
- import Flicking, { Plugin } from "@egjs/flicking";
2
- interface ArrowOptions {
3
- parentEl: HTMLElement | null;
4
- prevElSelector: string;
5
- nextElSelector: string;
6
- disabledClass: string;
7
- moveCount: number;
8
- moveByViewportSize: boolean;
9
- interruptable: boolean;
10
- }
11
- declare class Arrow implements Plugin {
12
- private _flicking;
13
- private _prevEl;
14
- private _nextEl;
15
- private _nextIndex;
16
- private _parentEl;
17
- private _prevElSelector;
18
- private _nextElSelector;
19
- private _disabledClass;
20
- private _moveCount;
21
- private _moveByViewportSize;
22
- private _interruptable;
23
- get prevEl(): HTMLElement;
24
- get nextEl(): HTMLElement;
25
- get parentEl(): ArrowOptions["parentEl"];
26
- get prevElSelector(): ArrowOptions["prevElSelector"];
27
- get nextElSelector(): ArrowOptions["nextElSelector"];
28
- get disabledClass(): ArrowOptions["disabledClass"];
29
- get moveCount(): ArrowOptions["moveCount"];
30
- get moveByViewportSize(): ArrowOptions["moveByViewportSize"];
31
- get interruptable(): ArrowOptions["interruptable"];
32
- set parentEl(val: ArrowOptions["parentEl"]);
33
- set prevElSelector(val: ArrowOptions["prevElSelector"]);
34
- set nextElSelector(val: ArrowOptions["nextElSelector"]);
35
- set disabledClass(val: ArrowOptions["disabledClass"]);
36
- set moveCount(val: ArrowOptions["moveCount"]);
37
- set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]);
38
- set interruptable(val: ArrowOptions["interruptable"]);
39
- constructor({ parentEl, prevElSelector, nextElSelector, disabledClass, moveCount, moveByViewportSize, interruptable }?: Partial<ArrowOptions>);
40
- init(flicking: Flicking): void;
41
- destroy(): void;
42
- update(): void;
43
- private _preventInputPropagation;
44
- private _onPrevClick;
45
- private _onNextClick;
46
- private _onAnimation;
47
- private _onWillChange;
48
- private _updateClass;
49
- private _onCatch;
50
- }
51
- export default Arrow;
1
+ import Flicking, { Plugin } from "@egjs/flicking";
2
+ /**
3
+ * Options for the {@link Arrow} plugin
4
+ */
5
+ export interface ArrowOptions {
6
+ /**
7
+ * The parent element to search for arrow elements. If `null`, the Flicking element is used
8
+ * @defaultValue null
9
+ */
10
+ parentEl: HTMLElement | null;
11
+ /**
12
+ * CSS selector for the "previous" arrow element
13
+ * @defaultValue ".flicking-arrow-prev"
14
+ */
15
+ prevElSelector: string;
16
+ /**
17
+ * CSS selector for the "next" arrow element
18
+ * @defaultValue ".flicking-arrow-next"
19
+ */
20
+ nextElSelector: string;
21
+ /**
22
+ * CSS class added to an arrow element when it is disabled (at the start/end of non-circular Flicking)
23
+ * @defaultValue "flicking-arrow-disabled"
24
+ */
25
+ disabledClass: string;
26
+ /**
27
+ * Number of panels to move when an arrow is clicked
28
+ * @defaultValue 1
29
+ */
30
+ moveCount: number;
31
+ /**
32
+ * Whether to move by viewport size instead of panel count
33
+ * @defaultValue false
34
+ */
35
+ moveByViewportSize: boolean;
36
+ }
37
+ /**
38
+ * A plugin to easily create prev/next arrow buttons for Flicking
39
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/arrow | Demo: Arrow}
40
+ */
41
+ declare class Arrow implements Plugin {
42
+ private _flicking;
43
+ private _prevEl;
44
+ private _nextEl;
45
+ private _parentEl;
46
+ private _prevElSelector;
47
+ private _nextElSelector;
48
+ private _disabledClass;
49
+ private _moveCount;
50
+ private _moveByViewportSize;
51
+ /** The "previous" arrow HTMLElement
52
+ * @readonly
53
+ */
54
+ get prevEl(): HTMLElement;
55
+ /** The "next" arrow HTMLElement
56
+ * @readonly
57
+ */
58
+ get nextEl(): HTMLElement;
59
+ /** Current value of the {@link ArrowOptions.parentEl | parentEl} option. */
60
+ get parentEl(): ArrowOptions["parentEl"];
61
+ /** Current value of the {@link ArrowOptions.prevElSelector | prevElSelector} option. */
62
+ get prevElSelector(): ArrowOptions["prevElSelector"];
63
+ /** Current value of the {@link ArrowOptions.nextElSelector | nextElSelector} option. */
64
+ get nextElSelector(): ArrowOptions["nextElSelector"];
65
+ /** Current value of the {@link ArrowOptions.disabledClass | disabledClass} option. */
66
+ get disabledClass(): ArrowOptions["disabledClass"];
67
+ /** Current value of the {@link ArrowOptions.moveCount | moveCount} option. */
68
+ get moveCount(): ArrowOptions["moveCount"];
69
+ /** Current value of the {@link ArrowOptions.moveByViewportSize | moveByViewportSize} option. */
70
+ get moveByViewportSize(): ArrowOptions["moveByViewportSize"];
71
+ /** Sets {@link ArrowOptions.parentEl | parentEl}. */
72
+ set parentEl(val: ArrowOptions["parentEl"]);
73
+ /** Sets {@link ArrowOptions.prevElSelector | prevElSelector}. */
74
+ set prevElSelector(val: ArrowOptions["prevElSelector"]);
75
+ /** Sets {@link ArrowOptions.nextElSelector | nextElSelector}. */
76
+ set nextElSelector(val: ArrowOptions["nextElSelector"]);
77
+ /** Sets {@link ArrowOptions.disabledClass | disabledClass}. */
78
+ set disabledClass(val: ArrowOptions["disabledClass"]);
79
+ /** Sets {@link ArrowOptions.moveCount | moveCount}. */
80
+ set moveCount(val: ArrowOptions["moveCount"]);
81
+ /** Sets {@link ArrowOptions.moveByViewportSize | moveByViewportSize}. */
82
+ set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]);
83
+ /**
84
+ * @param options - Options for the Arrow instance
85
+ * @example
86
+ * ```ts
87
+ * flicking.addPlugins(new Arrow({ parentEl: null, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }));
88
+ * ```
89
+ */
90
+ constructor(options?: Partial<ArrowOptions>);
91
+ /** Initialize the plugin and attach arrow event listeners to the Flicking instance.
92
+ * @param flicking - The Flicking instance to attach this plugin to
93
+ */
94
+ init(flicking: Flicking): void;
95
+ /** Destroy the plugin and remove all arrow event listeners. */
96
+ destroy(): void;
97
+ /** Update the arrow disabled/enabled state based on the current camera position. */
98
+ update(): void;
99
+ private _preventInputPropagation;
100
+ private _onPrevClick;
101
+ private _onNextClick;
102
+ private _onAnimation;
103
+ private _updateClass;
104
+ private _onCatch;
105
+ }
106
+ export default Arrow;
@@ -1,44 +1,104 @@
1
- import Flicking, { Plugin, DIRECTION } from "@egjs/flicking";
2
- interface AutoPlayOptions {
3
- duration: number;
4
- animationDuration: number | undefined;
5
- direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
6
- stopOnHover: boolean;
7
- stopOnInit: boolean;
8
- delayAfterHover: number;
9
- }
10
- declare class AutoPlay implements Plugin {
11
- private _duration;
12
- private _animationDuration;
13
- private _direction;
14
- private _stopOnHover;
15
- private _stopOnInit;
16
- private _delayAfterHover;
17
- private _flicking;
18
- private _timerId;
19
- private _mouseEntered;
20
- private _playing;
21
- get duration(): number;
22
- get animationDuration(): number | undefined;
23
- get direction(): AutoPlayOptions["direction"];
24
- get stopOnHover(): boolean;
25
- get stopOnInit(): boolean;
26
- get delayAfterHover(): number;
27
- get playing(): boolean;
28
- set duration(val: number);
29
- set animationDuration(val: number | undefined);
30
- set direction(val: AutoPlayOptions["direction"]);
31
- set stopOnHover(val: boolean);
32
- set stopOnInit(val: boolean);
33
- set delayAfterHover(val: number);
34
- constructor({ duration, animationDuration, direction, stopOnHover, stopOnInit, delayAfterHover }?: Partial<AutoPlayOptions>);
35
- init(flicking: Flicking): void;
36
- destroy(): void;
37
- update(): void;
38
- play: () => void;
39
- stop: () => void;
40
- private _movePanel;
41
- private _onMouseEnter;
42
- private _onMouseLeave;
43
- }
44
- export default AutoPlay;
1
+ import Flicking, { DIRECTION, Plugin } from "@egjs/flicking";
2
+ /**
3
+ * Options for the {@link AutoPlay} plugin
4
+ */
5
+ export interface AutoPlayOptions {
6
+ /**
7
+ * Time to wait before moving on to the next panel (ms)
8
+ * @defaultValue 2000
9
+ */
10
+ duration: number;
11
+ /**
12
+ * Duration of the panel move animation (ms). If `undefined`, the Flicking instance's `duration` is used
13
+ * @defaultValue undefined
14
+ */
15
+ animationDuration: number | undefined;
16
+ /**
17
+ * The direction in which the panel moves
18
+ * @defaultValue "NEXT"
19
+ */
20
+ direction: (typeof DIRECTION)["NEXT"] | (typeof DIRECTION)["PREV"];
21
+ /**
22
+ * Whether to stop when the mouse hovers over the element
23
+ * @defaultValue false
24
+ */
25
+ stopOnHover: boolean;
26
+ /**
27
+ * Whether to stop autoplay when the plugin is first initialized
28
+ * @defaultValue false
29
+ */
30
+ stopOnInit: boolean;
31
+ /**
32
+ * If `stopOnHover` is true, time to wait before resuming after mouse leaves (ms)
33
+ * @defaultValue Same as `duration`
34
+ */
35
+ delayAfterHover: number;
36
+ }
37
+ /**
38
+ * Plugin that allows you to automatically move to the next/previous panel on a specific time basis
39
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/autoplay | Demo: AutoPlay}
40
+ */
41
+ declare class AutoPlay implements Plugin {
42
+ private _duration;
43
+ private _animationDuration;
44
+ private _direction;
45
+ private _stopOnHover;
46
+ private _stopOnInit;
47
+ private _delayAfterHover;
48
+ private _flicking;
49
+ private _timerId;
50
+ private _mouseEntered;
51
+ private _playing;
52
+ /** Current value of the {@link AutoPlayOptions.duration | duration} option. */
53
+ get duration(): number;
54
+ /** Current value of the {@link AutoPlayOptions.animationDuration | animationDuration} option. */
55
+ get animationDuration(): number | undefined;
56
+ /** Current value of the {@link AutoPlayOptions.direction | direction} option. */
57
+ get direction(): AutoPlayOptions["direction"];
58
+ /** Current value of the {@link AutoPlayOptions.stopOnHover | stopOnHover} option. */
59
+ get stopOnHover(): boolean;
60
+ /** Current value of the {@link AutoPlayOptions.stopOnInit | stopOnInit} option. */
61
+ get stopOnInit(): boolean;
62
+ /** Current value of the {@link AutoPlayOptions.delayAfterHover | delayAfterHover} option. */
63
+ get delayAfterHover(): number;
64
+ /** Whether the autoplay is currently active
65
+ * @readonly
66
+ */
67
+ get playing(): boolean;
68
+ /** Sets {@link AutoPlayOptions.duration | duration}. */
69
+ set duration(val: number);
70
+ /** Sets {@link AutoPlayOptions.animationDuration | animationDuration}. */
71
+ set animationDuration(val: number | undefined);
72
+ /** Sets {@link AutoPlayOptions.direction | direction}. */
73
+ set direction(val: AutoPlayOptions["direction"]);
74
+ /** Sets {@link AutoPlayOptions.stopOnHover | stopOnHover}. */
75
+ set stopOnHover(val: boolean);
76
+ /** Sets {@link AutoPlayOptions.stopOnInit | stopOnInit}. */
77
+ set stopOnInit(val: boolean);
78
+ /** Sets {@link AutoPlayOptions.delayAfterHover | delayAfterHover}. */
79
+ set delayAfterHover(val: number);
80
+ /**
81
+ * @param options - Options for the AutoPlay instance
82
+ * @example
83
+ * ```ts
84
+ * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
85
+ * ```
86
+ */
87
+ constructor(options?: Partial<AutoPlayOptions>);
88
+ /** Initialize the plugin and start autoplay on the given Flicking instance.
89
+ * @param flicking - The Flicking instance to attach this plugin to
90
+ */
91
+ init(flicking: Flicking): void;
92
+ /** Destroy the plugin, stop autoplay, and remove all event listeners. */
93
+ destroy(): void;
94
+ /** Update the plugin state. This is a no-op for AutoPlay. */
95
+ update(): void;
96
+ /** Start the autoplay timer. Panels will move automatically after the configured {@link AutoPlayOptions.duration | duration}. */
97
+ play: () => void;
98
+ /** Stop the autoplay timer and cancel any pending panel movement. */
99
+ stop: () => void;
100
+ private _movePanel;
101
+ private _onMouseEnter;
102
+ private _onMouseLeave;
103
+ }
104
+ export default AutoPlay;
@@ -1,16 +1,41 @@
1
- import Flicking, { Plugin } from "@egjs/flicking";
2
- declare class Fade implements Plugin {
3
- private _flicking;
4
- private _selector;
5
- private _scale;
6
- get selector(): string;
7
- get scale(): number;
8
- set selector(val: string);
9
- set scale(val: number);
10
- constructor(selector?: string, scale?: number);
11
- init(flicking: Flicking): void;
12
- destroy(): void;
13
- update: () => void;
14
- private _onMove;
15
- }
16
- export default Fade;
1
+ import Flicking, { Plugin } from "@egjs/flicking";
2
+ /**
3
+ * A plugin to apply fade in/out effect while panels are moving
4
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/fade | Demo: Fade}
5
+ */
6
+ declare class Fade implements Plugin {
7
+ private _flicking;
8
+ private _selector;
9
+ private _scale;
10
+ /** CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
11
+ * @readonly
12
+ */
13
+ get selector(): string;
14
+ /** Effect amplification scale
15
+ * @readonly
16
+ */
17
+ get scale(): number;
18
+ /** Sets the CSS selector for the target fade element. */
19
+ set selector(val: string);
20
+ /** Sets the effect amplification scale. */
21
+ set scale(val: number);
22
+ /**
23
+ * @param selector - CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
24
+ * @param scale - Effect amplification scale
25
+ * @example
26
+ * ```ts
27
+ * flicking.addPlugins(new Fade("p", 1));
28
+ * ```
29
+ */
30
+ constructor(selector?: string, scale?: number);
31
+ /** Initialize the plugin and apply the fade effect to the Flicking instance.
32
+ * @param flicking - The Flicking instance to attach this plugin to
33
+ */
34
+ init(flicking: Flicking): void;
35
+ /** Destroy the plugin and remove all event listeners. */
36
+ destroy(): void;
37
+ /** Recalculate and apply the fade effect to all visible panels. */
38
+ update: () => void;
39
+ private _onMove;
40
+ }
41
+ export default Fade;
@@ -1,16 +1,41 @@
1
- import Flicking, { Plugin } from "@egjs/flicking";
2
- declare class Parallax implements Plugin {
3
- private _flicking;
4
- private _selector;
5
- private _scale;
6
- get selector(): string;
7
- get scale(): number;
8
- set selector(val: string);
9
- set scale(val: number);
10
- constructor(selector?: string, scale?: number);
11
- init(flicking: Flicking): void;
12
- destroy(): void;
13
- update: () => void;
14
- private _onMove;
15
- }
16
- export default Parallax;
1
+ import Flicking, { Plugin } from "@egjs/flicking";
2
+ /**
3
+ * A plugin to apply parallax effect while panels are moving
4
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/parallax | Demo: Parallax}
5
+ */
6
+ declare class Parallax implements Plugin {
7
+ private _flicking;
8
+ private _selector;
9
+ private _scale;
10
+ /** CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
11
+ * @readonly
12
+ */
13
+ get selector(): string;
14
+ /** Effect amplification scale
15
+ * @readonly
16
+ */
17
+ get scale(): number;
18
+ /** Sets the CSS selector for the target parallax element. */
19
+ set selector(val: string);
20
+ /** Sets the effect amplification scale. */
21
+ set scale(val: number);
22
+ /**
23
+ * @param selector - CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
24
+ * @param scale - Effect amplification scale
25
+ * @example
26
+ * ```ts
27
+ * flicking.addPlugins(new Parallax("img", 1));
28
+ * ```
29
+ */
30
+ constructor(selector?: string, scale?: number);
31
+ /** Initialize the plugin and apply the parallax effect to the Flicking instance.
32
+ * @param flicking - The Flicking instance to attach this plugin to
33
+ */
34
+ init(flicking: Flicking): void;
35
+ /** Destroy the plugin and remove all event listeners. */
36
+ destroy(): void;
37
+ /** Recalculate and apply the parallax effect to all visible panels. */
38
+ update: () => void;
39
+ private _onMove;
40
+ }
41
+ export default Parallax;