@egjs/flicking-plugins 4.7.2-beta.1 → 4.7.2-beta.10

package/README.md

@@ -1,75 +1,66 @@
-# @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)
+# @egjs/flicking-plugins
 
+> Part of the [@egjs/flicking](https://github.com/naver/egjs-flicking) monorepo.
 
 <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/Plugins">@egjs/flicking-plugins</a>
 </h1>
 
-Ready to use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
-- [Demos & Documents](https://naver.github.io/egjs-flicking/Plugins)
-- [AutoPlay](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
-- [Parallax](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
-- [Fade](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
-- [Arrow](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
-- [Pagination](https://naver.github.io/egjs-flicking/Plugins#pagination): Add a pagination bullets to Flicking.
+Ready-to-use plugins for [@egjs/flicking](https://github.com/naver/egjs-flicking)
+
+## Available Plugins
+
+- [**AutoPlay**](https://naver.github.io/egjs-flicking/Plugins#autoplay): Add autoplay to move to the next/previous panel periodically.
+- [**Parallax**](https://naver.github.io/egjs-flicking/Plugins#parallax): Add parallax effect attached with Flicking interaction.
+- [**Fade**](https://naver.github.io/egjs-flicking/Plugins#fade): Add fade effect attached with Flicking interaction.
+- [**Perspective**](https://naver.github.io/egjs-flicking/Plugins#perspective): Add 3D perspective effect.
+- [**Sync**](https://naver.github.io/egjs-flicking/Plugins#sync): Synchronize multiple Flicking instances.
+- [**Arrow**](https://naver.github.io/egjs-flicking/Plugins#arrow): Add prev/next button to Flicking.
+- [**Pagination**](https://naver.github.io/egjs-flicking/Plugins#pagination): Add pagination bullets to Flicking.
 
 ## ⚙️ Installation
-#### npm
+
+### npm
 ```bash
 npm install @egjs/flicking-plugins
 ```
 
-#### CDN
-- **Latest**
-   - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.js (all)
-   - https://naver.github.io/egjs-flicking-plugins/release/latest/dist/plugins.min.js (all)
-- **Specific version**
-   - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.js (all)
-   - https://naver.github.io/egjs-flicking-plugins/release/[PLUGIN-VERSION]/dist/plugins.min.js (all)
+### CDN
+```html
+<!-- All plugins -->
+<script src="https://unpkg.com/@egjs/flicking-plugins/dist/plugins.js"></script>
 
-## 🏃 Quick Start
-```js
-import { Fade, Parallax, AutoPlay } from "@egjs/flicking-plugins";
-
-flicking.addPlugins(new Fade(), new Parallax(), new AutoPlay());
+<!-- Specific version -->
+<script src="https://unpkg.com/@egjs/flicking-plugins@VERSION/dist/plugins.js"></script>
 ```
 
-## 📝 Feedback
-Please file an [Issue](https://github.com/naver/egjs-flicking/issues).
+## 📖 Documentation
+
+Full documentation: [https://naver.github.io/egjs-flicking/Plugins](https://naver.github.io/egjs-flicking/Plugins)
+
+## 💻 Development
 
-## 📜 License
-egjs-flicking-plugins is released under the [MIT license](http://naver.github.io/egjs/license.txt).
+This package is part of the [egjs-flicking monorepo](https://github.com/naver/egjs-flicking). See the root README for development instructions.
 
+### Building
+```bash
+pnpm build
 ```
-Copyright (c) 2019-present NAVER Corp.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+
+### Testing
+```bash
+pnpm test
 ```
 
-<p align="center">
-  <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>
-</p>
+## 📝 License
+
+MIT License
+
+Copyright (c) 2015-present NAVER Corp.
 
+See [LICENSE](../../LICENSE) for details.
 
-<!-- badges -->
-[badge-version]: https://img.shields.io/npm/v/@egjs/flicking-plugins.svg?style=flat
+## 🙌 Contributing
 
-<!-- links -->
-[link-version]: https://www.npmjs.com/package/@egjs/flicking-plugins
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) for contribution guidelines.

package/css/all.css

@@ -0,0 +1,2 @@
+@import "./arrow.css";
+@import "./pagination.css";

package/css/arrow.css

@@ -90,11 +90,11 @@
 .flicking-arrow-prev.is-thin::before,
 .flicking-arrow-prev.is-thin::after,
 .flicking-arrow-next.is-thin::before,
-.flicking-arrow-next.is-thin::after{
+.flicking-arrow-next.is-thin::after {
   height: 3px;
 }
 
 .flicking-arrow-prev.is-thin::after,
-.flicking-arrow-next.is-thin::after{
+.flicking-arrow-next.is-thin::after {
   top: calc(50% - 2px);
 }

package/css/pagination.css

@@ -20,7 +20,7 @@
 }
 
 .flicking-pagination-scroll .flicking-pagination-slider {
-  transition: .2s transform;
+  transition: 0.2s transform;
 }
 .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-slider,
 .flicking-pagination-scroll.flicking-pagination-uninitialized .flicking-pagination-bullet {
@@ -41,7 +41,7 @@
 .flicking-pagination-scroll .flicking-pagination-bullet {
   vertical-align: middle;
   position: relative;
-  transition: .2s transform;
+  transition: 0.2s transform;
 }
 
 .flicking-pagination-bullet-active {
@@ -51,7 +51,9 @@
 .flicking-pagination-scroll .flicking-pagination-bullet {
   vertical-align: middle;
   position: relative;
-  transition: .2s transform,.2s left;
+  transition:
+    0.2s transform,
+    0.2s left;
   transform: scale(0);
 }
 

package/declaration/Arrow.d.ts

@@ -1,12 +1,43 @@
 import Flicking, { Plugin } from "@egjs/flicking";
-interface ArrowOptions {
+/**
+ * Options for the {@link Arrow} plugin
+ */
+export interface ArrowOptions {
+    /**
+     * The parent element to search for arrow elements. If `null`, the Flicking element is used
+     * @defaultValue null
+     */
     parentEl: HTMLElement | null;
+    /**
+     * CSS selector for the "previous" arrow element
+     * @defaultValue ".flicking-arrow-prev"
+     */
     prevElSelector: string;
+    /**
+     * CSS selector for the "next" arrow element
+     * @defaultValue ".flicking-arrow-next"
+     */
     nextElSelector: string;
+    /**
+     * CSS class added to an arrow element when it is disabled (at the start/end of non-circular Flicking)
+     * @defaultValue "flicking-arrow-disabled"
+     */
     disabledClass: string;
+    /**
+     * Number of panels to move when an arrow is clicked
+     * @defaultValue 1
+     */
     moveCount: number;
+    /**
+     * Whether to move by viewport size instead of panel count
+     * @defaultValue false
+     */
     moveByViewportSize: boolean;
 }
+/**
+ * A plugin to easily create prev/next arrow buttons for Flicking
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/arrow | Demo: Arrow}
+ */
 declare class Arrow implements Plugin {
     private _flicking;
     private _prevEl;
@@ -17,23 +48,53 @@ declare class Arrow implements Plugin {
     private _disabledClass;
     private _moveCount;
     private _moveByViewportSize;
+    /** The "previous" arrow HTMLElement
+     * @readonly
+     */
     get prevEl(): HTMLElement;
+    /** The "next" arrow HTMLElement
+     * @readonly
+     */
     get nextEl(): HTMLElement;
+    /** Current value of the {@link ArrowOptions.parentEl | parentEl} option. */
     get parentEl(): ArrowOptions["parentEl"];
+    /** Current value of the {@link ArrowOptions.prevElSelector | prevElSelector} option. */
     get prevElSelector(): ArrowOptions["prevElSelector"];
+    /** Current value of the {@link ArrowOptions.nextElSelector | nextElSelector} option. */
     get nextElSelector(): ArrowOptions["nextElSelector"];
+    /** Current value of the {@link ArrowOptions.disabledClass | disabledClass} option. */
     get disabledClass(): ArrowOptions["disabledClass"];
+    /** Current value of the {@link ArrowOptions.moveCount | moveCount} option. */
     get moveCount(): ArrowOptions["moveCount"];
+    /** Current value of the {@link ArrowOptions.moveByViewportSize | moveByViewportSize} option. */
     get moveByViewportSize(): ArrowOptions["moveByViewportSize"];
+    /** Sets {@link ArrowOptions.parentEl | parentEl}. */
     set parentEl(val: ArrowOptions["parentEl"]);
+    /** Sets {@link ArrowOptions.prevElSelector | prevElSelector}. */
     set prevElSelector(val: ArrowOptions["prevElSelector"]);
+    /** Sets {@link ArrowOptions.nextElSelector | nextElSelector}. */
     set nextElSelector(val: ArrowOptions["nextElSelector"]);
+    /** Sets {@link ArrowOptions.disabledClass | disabledClass}. */
     set disabledClass(val: ArrowOptions["disabledClass"]);
+    /** Sets {@link ArrowOptions.moveCount | moveCount}. */
     set moveCount(val: ArrowOptions["moveCount"]);
+    /** Sets {@link ArrowOptions.moveByViewportSize | moveByViewportSize}. */
     set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]);
-    constructor({ parentEl, prevElSelector, nextElSelector, disabledClass, moveCount, moveByViewportSize }?: Partial<ArrowOptions>);
+    /**
+     * @param options - Options for the Arrow instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Arrow({ parentEl: null, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }));
+     * ```
+     */
+    constructor(options?: Partial<ArrowOptions>);
+    /** Initialize the plugin and attach arrow event listeners to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all arrow event listeners. */
     destroy(): void;
+    /** Update the arrow disabled/enabled state based on the current camera position. */
     update(): void;
     private _preventInputPropagation;
     private _onPrevClick;

package/declaration/AutoPlay.d.ts

@@ -1,37 +1,101 @@
-import Flicking, { Plugin, DIRECTION } from "@egjs/flicking";
-interface AutoPlayOptions {
+import Flicking, { DIRECTION, Plugin } from "@egjs/flicking";
+/**
+ * Options for the {@link AutoPlay} plugin
+ */
+export interface AutoPlayOptions {
+    /**
+     * Time to wait before moving on to the next panel (ms)
+     * @defaultValue 2000
+     */
     duration: number;
+    /**
+     * Duration of the panel move animation (ms). If `undefined`, the Flicking instance's `duration` is used
+     * @defaultValue undefined
+     */
     animationDuration: number | undefined;
-    direction: typeof DIRECTION["NEXT"] | typeof DIRECTION["PREV"];
+    /**
+     * The direction in which the panel moves
+     * @defaultValue "NEXT"
+     */
+    direction: (typeof DIRECTION)["NEXT"] | (typeof DIRECTION)["PREV"];
+    /**
+     * Whether to stop when the mouse hovers over the element
+     * @defaultValue false
+     */
     stopOnHover: boolean;
+    /**
+     * Whether to stop autoplay when the plugin is first initialized
+     * @defaultValue false
+     */
+    stopOnInit: boolean;
+    /**
+     * If `stopOnHover` is true, time to wait before resuming after mouse leaves (ms)
+     * @defaultValue Same as `duration`
+     */
     delayAfterHover: number;
 }
+/**
+ * Plugin that allows you to automatically move to the next/previous panel on a specific time basis
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/autoplay | Demo: AutoPlay}
+ */
 declare class AutoPlay implements Plugin {
     private _duration;
     private _animationDuration;
     private _direction;
     private _stopOnHover;
+    private _stopOnInit;
     private _delayAfterHover;
     private _flicking;
     private _timerId;
     private _mouseEntered;
     private _playing;
+    /** Current value of the {@link AutoPlayOptions.duration | duration} option. */
     get duration(): number;
+    /** Current value of the {@link AutoPlayOptions.animationDuration | animationDuration} option. */
     get animationDuration(): number | undefined;
+    /** Current value of the {@link AutoPlayOptions.direction | direction} option. */
     get direction(): AutoPlayOptions["direction"];
+    /** Current value of the {@link AutoPlayOptions.stopOnHover | stopOnHover} option. */
     get stopOnHover(): boolean;
+    /** Current value of the {@link AutoPlayOptions.stopOnInit | stopOnInit} option. */
+    get stopOnInit(): boolean;
+    /** Current value of the {@link AutoPlayOptions.delayAfterHover | delayAfterHover} option. */
     get delayAfterHover(): number;
+    /** Whether the autoplay is currently active
+     * @readonly
+     */
     get playing(): boolean;
+    /** Sets {@link AutoPlayOptions.duration | duration}. */
     set duration(val: number);
+    /** Sets {@link AutoPlayOptions.animationDuration | animationDuration}. */
     set animationDuration(val: number | undefined);
+    /** Sets {@link AutoPlayOptions.direction | direction}. */
     set direction(val: AutoPlayOptions["direction"]);
+    /** Sets {@link AutoPlayOptions.stopOnHover | stopOnHover}. */
     set stopOnHover(val: boolean);
+    /** Sets {@link AutoPlayOptions.stopOnInit | stopOnInit}. */
+    set stopOnInit(val: boolean);
+    /** Sets {@link AutoPlayOptions.delayAfterHover | delayAfterHover}. */
     set delayAfterHover(val: number);
-    constructor({ duration, animationDuration, direction, stopOnHover, delayAfterHover }?: Partial<AutoPlayOptions>);
+    /**
+     * @param options - Options for the AutoPlay instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
+     * ```
+     */
+    constructor(options?: Partial<AutoPlayOptions>);
+    /** Initialize the plugin and start autoplay on the given Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin, stop autoplay, and remove all event listeners. */
     destroy(): void;
+    /** Update the plugin state. This is a no-op for AutoPlay. */
     update(): void;
+    /** Start the autoplay timer. Panels will move automatically after the configured {@link AutoPlayOptions.duration | duration}. */
     play: () => void;
+    /** Stop the autoplay timer and cancel any pending panel movement. */
     stop: () => void;
     private _movePanel;
     private _onMouseEnter;

package/declaration/Fade.d.ts

@@ -1,15 +1,40 @@
 import Flicking, { Plugin } from "@egjs/flicking";
+/**
+ * A plugin to apply fade in/out effect while panels are moving
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/fade | Demo: Fade}
+ */
 declare class Fade implements Plugin {
     private _flicking;
     private _selector;
     private _scale;
+    /** CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
+     * @readonly
+     */
     get selector(): string;
+    /** Effect amplification scale
+     * @readonly
+     */
     get scale(): number;
+    /** Sets the CSS selector for the target fade element. */
     set selector(val: string);
+    /** Sets the effect amplification scale. */
     set scale(val: number);
+    /**
+     * @param selector - CSS selector for the element to apply the fade effect. If empty, the panel element itself is used
+     * @param scale - Effect amplification scale
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Fade("p", 1));
+     * ```
+     */
     constructor(selector?: string, scale?: number);
+    /** Initialize the plugin and apply the fade effect to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all event listeners. */
     destroy(): void;
+    /** Recalculate and apply the fade effect to all visible panels. */
     update: () => void;
     private _onMove;
 }

package/declaration/Parallax.d.ts

@@ -1,15 +1,40 @@
 import Flicking, { Plugin } from "@egjs/flicking";
+/**
+ * A plugin to apply parallax effect while panels are moving
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/parallax | Demo: Parallax}
+ */
 declare class Parallax implements Plugin {
     private _flicking;
     private _selector;
     private _scale;
+    /** CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
+     * @readonly
+     */
     get selector(): string;
+    /** Effect amplification scale
+     * @readonly
+     */
     get scale(): number;
+    /** Sets the CSS selector for the target parallax element. */
     set selector(val: string);
+    /** Sets the effect amplification scale. */
     set scale(val: number);
+    /**
+     * @param selector - CSS selector for the element to apply the parallax effect. If empty, the panel element itself is used
+     * @param scale - Effect amplification scale
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Parallax("img", 1));
+     * ```
+     */
     constructor(selector?: string, scale?: number);
+    /** Initialize the plugin and apply the parallax effect to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all event listeners. */
     destroy(): void;
+    /** Recalculate and apply the parallax effect to all visible panels. */
     update: () => void;
     private _onMove;
 }

package/declaration/Perspective.d.ts

@@ -1,27 +1,70 @@
 import Flicking, { Plugin } from "@egjs/flicking";
-interface PerspectiveOptions {
+/**
+ * Options for the {@link Perspective} plugin
+ */
+export interface PerspectiveOptions {
+    /**
+     * CSS selector for the element to apply the perspective effect. If empty, the panel element itself is used
+     * @defaultValue ""
+     */
     selector: string;
+    /**
+     * Effect amplification scale
+     * @defaultValue 1
+     */
     scale: number;
+    /**
+     * Rotation amplification scale
+     * @defaultValue 1
+     */
     rotate: number;
+    /**
+     * The value of the CSS `perspective` property (px)
+     * @defaultValue 1000
+     */
     perspective: number;
 }
+/**
+ * A plugin to apply 3D perspective effect while panels are moving
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/perspective | Demo: Perspective}
+ */
 declare class Perspective implements Plugin {
     private _flicking;
     private _selector;
     private _scale;
     private _rotate;
     private _perspective;
+    /** Current value of the {@link PerspectiveOptions.selector | selector} option. */
     get selector(): string;
+    /** Current value of the {@link PerspectiveOptions.scale | scale} option. */
     get scale(): number;
+    /** Current value of the {@link PerspectiveOptions.rotate | rotate} option. */
     get rotate(): number;
+    /** Current value of the {@link PerspectiveOptions.perspective | perspective} option. */
     get perspective(): number;
+    /** Sets {@link PerspectiveOptions.selector | selector}. */
     set selector(val: string);
+    /** Sets {@link PerspectiveOptions.scale | scale}. */
     set scale(val: number);
+    /** Sets {@link PerspectiveOptions.rotate | rotate}. */
     set rotate(val: number);
+    /** Sets {@link PerspectiveOptions.perspective | perspective}. */
     set perspective(val: number);
-    constructor({ selector, scale, rotate, perspective }?: Partial<PerspectiveOptions>);
+    /**
+     * @param options - Options for the Perspective instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Perspective({ selector: "p", scale: 1, rotate: 1, perspective: 1000 }));
+     * ```
+     */
+    constructor(options?: Partial<PerspectiveOptions>);
+    /** Initialize the plugin and apply the perspective effect to the Flicking instance.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all event listeners. */
     destroy(): void;
+    /** Recalculate and apply the perspective effect to all visible panels. */
     update: () => void;
     private _onMove;
 }

package/declaration/Sync.d.ts

@@ -1,28 +1,83 @@
-import Flicking from "@egjs/flicking";
 import type { Plugin } from "@egjs/flicking";
+import Flicking from "@egjs/flicking";
 import { SYNC } from "./const";
+/**
+ * Options for the {@link Sync} plugin
+ */
 export interface SyncOptions {
+    /**
+     * Method to synchronize between Flickings. `"camera"` syncs by camera position, `"index"` syncs by panel index
+     * @defaultValue "camera"
+     */
     type: typeof SYNC.TYPE.CAMERA | typeof SYNC.TYPE.INDEX;
+    /**
+     * Detailed options for each Flicking instance to synchronize
+     * @defaultValue []
+     */
     synchronizedFlickingOptions: SychronizableFlickingOptions[];
 }
+/**
+ * Per-instance synchronization options used in {@link SyncOptions.synchronizedFlickingOptions}
+ */
 export interface SychronizableFlickingOptions {
+    /**
+     * The Flicking instance to synchronize
+     */
     flicking: Flicking;
+    /**
+     * Whether clicking this Flicking's panel changes the index of all synced Flickings
+     * @defaultValue false
+     */
     isClickable?: boolean;
+    /**
+     * Whether mouse/touch scroll on this Flicking changes other Flickings' index. Only available for the `"index"` type
+     * @defaultValue false
+     */
     isSlidable?: boolean;
+    /**
+     * CSS class added to the active (selected) panel
+     * @defaultValue undefined
+     */
     activeClass?: string;
 }
+/**
+ * Plugin for synchronizing multiple Flicking instances
+ * @see {@link https://naver.github.io/egjs-flicking/docs/demos/plugins/sync | Demo: Sync}
+ */
 declare class Sync implements Plugin {
     private _flicking;
     private _disabledIndex;
     private _type;
     private _synchronizedFlickingOptions;
+    /** Current value of the {@link SyncOptions.type | type} option. */
     get type(): SyncOptions["type"];
+    /** Current value of the {@link SyncOptions.synchronizedFlickingOptions | synchronizedFlickingOptions} option. */
     get synchronizedFlickingOptions(): SyncOptions["synchronizedFlickingOptions"];
+    /** Sets {@link SyncOptions.type | type}. */
     set type(val: SyncOptions["type"]);
+    /** Sets {@link SyncOptions.synchronizedFlickingOptions | synchronizedFlickingOptions}. */
     set synchronizedFlickingOptions(val: SyncOptions["synchronizedFlickingOptions"]);
-    constructor({ type, synchronizedFlickingOptions }?: Partial<SyncOptions>);
+    /**
+     * @param options - Options for the Sync instance
+     * @example
+     * ```ts
+     * flicking.addPlugins(new Sync({
+     *   type: "camera",
+     *   synchronizedFlickingOptions: [
+     *     { flicking: flicking1 },
+     *     { flicking: flicking2, isClickable: true }
+     *   ]
+     * }));
+     * ```
+     */
+    constructor(options?: Partial<SyncOptions>);
+    /** Initialize the plugin and set up synchronization event listeners between Flicking instances.
+     * @param flicking - The Flicking instance to attach this plugin to
+     */
     init(flicking: Flicking): void;
+    /** Destroy the plugin and remove all synchronization event listeners. */
     destroy(): void;
+    /** Update the active class state for all synchronized Flicking instances. */
     update(): void;
     private _preventEvent;
     private _addEvents;

package/declaration/index.d.ts

@@ -1,10 +1,13 @@
-import Parallax from "./Parallax";
-import Fade from "./Fade";
-import AutoPlay from "./AutoPlay";
 import Arrow from "./Arrow";
-import Sync, { SyncOptions, SychronizableFlickingOptions } from "./Sync";
+import AutoPlay from "./AutoPlay";
+import Fade from "./Fade";
+import Parallax from "./Parallax";
 import Perspective from "./Perspective";
+import Sync, { SychronizableFlickingOptions, SyncOptions } from "./Sync";
 export * from "./pagination";
 export { Parallax, Fade, AutoPlay, Arrow, Sync, Perspective };
 export type { SyncOptions, SychronizableFlickingOptions };
+export type { ArrowOptions } from "./Arrow";
+export type { AutoPlayOptions } from "./AutoPlay";
 export * from "./const";
+export type { PerspectiveOptions } from "./Perspective";