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

package/package.json

@@ -1,106 +1,50 @@
 {
-	"name": "@egjs/flicking-plugins",
-	"version": "4.7.2-beta.1",
-	"description": "Ready-to-use plugins for @egjs/flicking",
-	"module": "./dist/plugins.esm.js",
-	"main": "./dist/plugins.js",
-	"types": "./declaration/index.d.ts",
-	"sideEffects": false,
-	"scripts": {
-		"start": "concurrently \"rollup -w --config ./rollup.config.dev.js\" \"http-serve\"",
-		"build": "rm -rf ./dist ./declaration && rollup -c && npm run declaration && npm run css && npm run printsizes",
-		"declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-		"printsizes": "print-sizes ./dist --exclude=\\.map",
-		"css": "node config/build-css",
-		"lint": "eslint 'src/**/*.ts'",
-		"release": "release-helper",
-		"test": "karma start",
-		"test:chrome": "karma start --chrome",
-		"coverage": "karma start --coverage && print-coveralls --sort=desc",
-		"coveralls": "cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-		"demo:build": "npm run build && cpx 'dist/**/*' demo/release/latest/dist --clean",
-		"demo:prebuild-version": "cpx 'dist/**/*' demo/release/$npm_package_version/dist --clean",
-		"demo:prebuild-latest": "cpx 'dist/**/*' demo/release/latest/dist --clean",
-		"demo:predeploy": "npm run build && npm run demo:prebuild-version && npm run demo:prebuild-latest",
-		"demo:deploy": "npm run demo:predeploy && gh-pages -a -d demo/ --remote upstream"
-	},
-	"keywords": [
-		"flicking",
-		"slide",
-		"swipe",
-		"css",
-		"parallax",
-		"fade",
-		"autoplay",
-		"snap",
-		"flick",
-		"egjs",
-		"eg"
-	],
-	"author": {
-		"name": "NAVER Corp."
-	},
-	"namespace": {
-		"eg": "eg"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/naver/egjs-flicking-plugins"
-	},
-	"homepage": "https://github.com/naver/egjs-flicking-plugins",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/naver/egjs-flicking-plugins/issues"
-	},
-	"browserslist": [
-		"last 2 version",
-		"ie 9-11",
-		"not op_mini all"
-	],
-	"peerDependencies": {
-		"@egjs/flicking": "^4.11.5-beta.0"
-	},
-	"devDependencies": {
-		"@egjs/build-helper": "0.0.5",
-		"@egjs/flicking": "^4.11.5-beta.0",
-		"@egjs/release-helper": "0.0.3",
-		"@types/chai": "^4.0.10",
-		"@types/karma-chai": "^0.1.1",
-		"@types/mocha": "^5.2.5",
-		"@types/node": "^14.0.27",
-		"@types/sinon": "^7.0.3",
-		"@typescript-eslint/eslint-plugin": "^4.22.0",
-		"@typescript-eslint/eslint-plugin-tslint": "^4.22.0",
-		"@typescript-eslint/parser": "^4.22.0",
-		"autoprefixer": "^9.8.6",
-		"bulma": "^0.9.2",
-		"chai": "^4.2.0",
-		"concurrently": "^6.2.0",
-		"coveralls": "^3.1.0",
-		"cpx": "^1.5.0",
-		"eslint": "^7.25.0",
-		"eslint-plugin-import": "^2.22.1",
-		"eslint-plugin-jsdoc": "^33.0.0",
-		"eslint-plugin-prefer-arrow": "^1.2.3",
-		"gh-pages": "^2.0.1",
-		"hammer-simulator": "^0.0.1",
-		"http-serve": "^1.0.1",
-		"karma": "^3.1.4",
-		"karma-chai": "^0.1.0",
-		"karma-chrome-launcher": "^2.2.0",
-		"karma-mocha": "^1.3.0",
-		"karma-mocha-reporter": "^2.2.5",
-		"karma-sinon": "^1.0.5",
-		"karma-typescript-egjs": "^4.0.0",
-		"karma-viewport": "^1.0.4",
-		"mocha": "^5.2.0",
-		"postcss-clean": "^1.2.2",
-		"postcss-js": "^3.0.3",
-		"print-coveralls": "^1.2.2",
-		"print-sizes": "^0.1.0",
-		"sinon": "^7.2.3",
-		"tslib": "^2.3.0",
-		"tslint": "^5.13.1",
-		"typescript": "^4.2.3"
-	}
-}
+  "name": "@egjs/flicking-plugins",
+  "version": "4.7.2-beta.10",
+  "description": "Ready-to-use plugins for @egjs/flicking",
+  "module": "./dist/plugins.esm.js",
+  "main": "./dist/plugins.js",
+  "types": "./declaration/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "keywords": [
+    "flicking",
+    "plugins",
+    "carousel",
+    "slide",
+    "swipe",
+    "parallax",
+    "fade",
+    "autoplay",
+    "egjs"
+  ],
+  "author": {
+    "name": "NAVER Corp."
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/naver/egjs-flicking",
+    "directory": "packages/flicking-plugins"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@egjs/flicking": "^4.1.0"
+  },
+  "devDependencies": {
+    "@egjs/flicking": "~4.15.0"
+  },
+  "scripts": {
+    "dev": "vite --config vite.dev.config.ts",
+    "dev:preview": "vite --config vite.dev.config.ts --mode production",
+    "start": "vite build --watch",
+    "build": "run-s build:bundle build:css build:declaration printsizes",
+    "build:bundle": "rm -rf ./dist && concurrently \"vite build\" \"VITE_BUILD_FORMAT=umd vite build\" \"VITE_BUILD_FORMAT=umd-min vite build\"",
+    "build:css": "run-s build:css-process build:css-bundle",
+    "build:css-process": "node ../../config/build-plugins-css.js",
+    "build:css-bundle": "cat dist/arrow.css dist/pagination.css > dist/flicking-plugins.css && postcss dist/flicking-plugins.css --use postcss-clean --no-map --output dist/flicking-plugins.min.css",
+    "build:declaration": "tsc -p tsconfig.declaration.json",
+    "printsizes": "print-sizes ./dist --exclude=\\.map",
+    "lint": "biome check src/"
+  }
+}

package/src/Arrow.ts

@@ -1,22 +1,47 @@
 import Flicking, { EVENTS, FlickingError, Plugin } from "@egjs/flicking";
-
-import { BROWSER } from "./event";
 import { ARROW } from "./const";
+import { BROWSER } from "./event";
 import { addClass, getElement, removeClass } from "./utils";
 
-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/right arrow button of Flicking
- * @ko 이전/다음 버튼을 쉽게 만들 수 있는 플러그인
- * @memberof Flicking.Plugins
+ * 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}
  */
 class Arrow implements Plugin {
   /* Internal Values */
@@ -32,31 +57,86 @@ class Arrow implements Plugin {
   private _moveCount: ArrowOptions["moveCount"];
   private _moveByViewportSize: ArrowOptions["moveByViewportSize"];
 
-  public get prevEl() { return this._prevEl; }
-  public get nextEl() { return this._nextEl; }
-
-  public get parentEl() { return this._parentEl; }
-  public get prevElSelector() { return this._prevElSelector; }
-  public get nextElSelector() { return this._nextElSelector; }
-  public get disabledClass() { return this._disabledClass; }
-  public get moveCount() { return this._moveCount; }
-  public get moveByViewportSize() { return this._moveByViewportSize; }
-
-  public set parentEl(val: ArrowOptions["parentEl"]) { this._parentEl = val; }
-  public set prevElSelector(val: ArrowOptions["prevElSelector"]) { this._prevElSelector = val; }
-  public set nextElSelector(val: ArrowOptions["nextElSelector"]) { this._nextElSelector = val; }
-  public set disabledClass(val: ArrowOptions["disabledClass"]) { this._disabledClass = val; }
-  public set moveCount(val: ArrowOptions["moveCount"]) { this._moveCount = val; }
-  public set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]) { this._moveByViewportSize = val; }
-
-  public constructor({
-    parentEl = null,
-    prevElSelector = ARROW.PREV_SELECTOR,
-    nextElSelector = ARROW.NEXT_SELECTOR,
-    disabledClass = ARROW.DISABLED_CLASS,
-    moveCount = 1,
-    moveByViewportSize = false
-  }: Partial<ArrowOptions> = {}) {
+  /** The "previous" arrow HTMLElement
+   * @readonly
+   */
+  public get prevEl() {
+    return this._prevEl;
+  }
+  /** The "next" arrow HTMLElement
+   * @readonly
+   */
+  public get nextEl() {
+    return this._nextEl;
+  }
+
+  /** Current value of the {@link ArrowOptions.parentEl | parentEl} option. */
+  public get parentEl() {
+    return this._parentEl;
+  }
+  /** Current value of the {@link ArrowOptions.prevElSelector | prevElSelector} option. */
+  public get prevElSelector() {
+    return this._prevElSelector;
+  }
+  /** Current value of the {@link ArrowOptions.nextElSelector | nextElSelector} option. */
+  public get nextElSelector() {
+    return this._nextElSelector;
+  }
+  /** Current value of the {@link ArrowOptions.disabledClass | disabledClass} option. */
+  public get disabledClass() {
+    return this._disabledClass;
+  }
+  /** Current value of the {@link ArrowOptions.moveCount | moveCount} option. */
+  public get moveCount() {
+    return this._moveCount;
+  }
+  /** Current value of the {@link ArrowOptions.moveByViewportSize | moveByViewportSize} option. */
+  public get moveByViewportSize() {
+    return this._moveByViewportSize;
+  }
+
+  /** Sets {@link ArrowOptions.parentEl | parentEl}. */
+  public set parentEl(val: ArrowOptions["parentEl"]) {
+    this._parentEl = val;
+  }
+  /** Sets {@link ArrowOptions.prevElSelector | prevElSelector}. */
+  public set prevElSelector(val: ArrowOptions["prevElSelector"]) {
+    this._prevElSelector = val;
+  }
+  /** Sets {@link ArrowOptions.nextElSelector | nextElSelector}. */
+  public set nextElSelector(val: ArrowOptions["nextElSelector"]) {
+    this._nextElSelector = val;
+  }
+  /** Sets {@link ArrowOptions.disabledClass | disabledClass}. */
+  public set disabledClass(val: ArrowOptions["disabledClass"]) {
+    this._disabledClass = val;
+  }
+  /** Sets {@link ArrowOptions.moveCount | moveCount}. */
+  public set moveCount(val: ArrowOptions["moveCount"]) {
+    this._moveCount = val;
+  }
+  /** Sets {@link ArrowOptions.moveByViewportSize | moveByViewportSize}. */
+  public set moveByViewportSize(val: ArrowOptions["moveByViewportSize"]) {
+    this._moveByViewportSize = val;
+  }
+
+  /**
+   * @param options - Options for the Arrow instance
+   * @example
+   * ```ts
+   * flicking.addPlugins(new Arrow({ parentEl: null, prevElSelector: ".flicking-arrow-prev", nextElSelector: ".flicking-arrow-next" }));
+   * ```
+   */
+  public constructor(options: Partial<ArrowOptions> = {}) {
+    const {
+      parentEl = null,
+      prevElSelector = ARROW.PREV_SELECTOR,
+      nextElSelector = ARROW.NEXT_SELECTOR,
+      disabledClass = ARROW.DISABLED_CLASS,
+      moveCount = 1,
+      moveByViewportSize = false
+    } = options;
+
     this._parentEl = parentEl;
     this._prevElSelector = prevElSelector;
     this._nextElSelector = nextElSelector;
@@ -65,6 +145,9 @@ class Arrow implements Plugin {
     this._moveByViewportSize = moveByViewportSize;
   }
 
+  /** Initialize the plugin and attach arrow event listeners to the Flicking instance.
+   * @param flicking - The Flicking instance to attach this plugin to
+   */
   public init(flicking: Flicking): void {
     if (this._flicking) {
       this.destroy();
@@ -92,6 +175,7 @@ class Arrow implements Plugin {
     this.update();
   }
 
+  /** Destroy the plugin and remove all arrow event listeners. */
   public destroy(): void {
     const flicking = this._flicking;
 
@@ -114,6 +198,7 @@ class Arrow implements Plugin {
     this._flicking = null;
   }
 
+  /** Update the arrow disabled/enabled state based on the current camera position. */
   public update(): void {
     this._updateClass(this._flicking!.camera.position);
   }
@@ -133,8 +218,7 @@ class Arrow implements Plugin {
     const moveCount = this._moveCount;
 
     if (this._moveByViewportSize) {
-      flicking.control.moveToPosition(camera.position - camera.size, flicking.duration)
-        .catch(this._onCatch);
+      flicking.control.moveToPosition(camera.position - camera.size, flicking.duration).catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
         let targetPanel = flicking.currentPanel;
@@ -145,11 +229,9 @@ class Arrow implements Plugin {
 
         targetPanel.focus().catch(this._onCatch);
       } else if (flicking.index > firstAnchor.panel.index) {
-        flicking.moveTo(Math.max(flicking.index - moveCount, firstAnchor.panel.index))
-          .catch(this._onCatch);
+        flicking.moveTo(Math.max(flicking.index - moveCount, firstAnchor.panel.index)).catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(flicking.index)
-          .catch(this._onCatch);
+        flicking.moveTo(flicking.index).catch(this._onCatch);
       }
     }
   };
@@ -166,8 +248,7 @@ class Arrow implements Plugin {
     const moveCount = this._moveCount;
 
     if (this._moveByViewportSize) {
-      flicking.control.moveToPosition(camera.position + camera.size, flicking.duration)
-        .catch(this._onCatch);
+      flicking.control.moveToPosition(camera.position + camera.size, flicking.duration).catch(this._onCatch);
     } else {
       if (flicking.circularEnabled) {
         let targetPanel = flicking.currentPanel;
@@ -178,11 +259,9 @@ class Arrow implements Plugin {
 
         targetPanel.focus().catch(this._onCatch);
       } else if (flicking.index < lastAnchor.panel.index) {
-        flicking.moveTo(Math.min(flicking.index + moveCount, lastAnchor.panel.index))
-          .catch(this._onCatch);
+        flicking.moveTo(Math.min(flicking.index + moveCount, lastAnchor.panel.index)).catch(this._onCatch);
       } else if (camera.position > camera.range.min) {
-        flicking.moveTo(flicking.index)
-          .catch(this._onCatch);
+        flicking.moveTo(flicking.index).catch(this._onCatch);
       }
     }
   };
@@ -206,12 +285,8 @@ class Arrow implements Plugin {
     const nextEl = this._nextEl;
     const cameraRange = flicking.camera.range;
 
-    const stopAtPrevEdge = flicking.circularEnabled
-      ? false
-      : pos <= cameraRange.min;
-    const stopAtNextEdge = flicking.circularEnabled
-      ? false
-      : pos >= cameraRange.max;
+    const stopAtPrevEdge = flicking.circularEnabled ? false : pos <= cameraRange.min;
+    const stopAtNextEdge = flicking.circularEnabled ? false : pos >= cameraRange.max;
 
     if (stopAtPrevEdge) {
       addClass(prevEl, disabledClass);

package/src/AutoPlay.ts

@@ -1,17 +1,44 @@
-import Flicking, { EVENTS, Plugin, DIRECTION, MOVE_TYPE } from "@egjs/flicking";
+import Flicking, { DIRECTION, EVENTS, MOVE_TYPE, Plugin } from "@egjs/flicking";
 
-interface AutoPlayOptions {
+/**
+ * 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 allow you to automatically move to the next/previous panel, on a specific time basis
- * @ko 일정 시간마다, 자동으로 다음/이전 패널로 넘어가도록 할 수 있는 플러그인
- * @memberof Flicking.Plugins
+ * 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}
  */
 class AutoPlay implements Plugin {
   /* Options */
@@ -19,6 +46,7 @@ class AutoPlay implements Plugin {
   private _animationDuration: AutoPlayOptions["animationDuration"];
   private _direction: AutoPlayOptions["direction"];
   private _stopOnHover: AutoPlayOptions["stopOnHover"];
+  private _stopOnInit: AutoPlayOptions["stopOnInit"];
   private _delayAfterHover: AutoPlayOptions["delayAfterHover"];
 
   /* Internal Values */
@@ -27,45 +55,90 @@ class AutoPlay implements Plugin {
   private _mouseEntered = false;
   private _playing = false;
 
-  public get duration() { return this._duration; }
-  public get animationDuration() { return this._animationDuration; }
-  public get direction() { return this._direction; }
-  public get stopOnHover() { return this._stopOnHover; }
-  public get delayAfterHover() { return this._delayAfterHover; }
-  public get playing() { return this._playing; }
+  /** Current value of the {@link AutoPlayOptions.duration | duration} option. */
+  public get duration() {
+    return this._duration;
+  }
+  /** Current value of the {@link AutoPlayOptions.animationDuration | animationDuration} option. */
+  public get animationDuration() {
+    return this._animationDuration;
+  }
+  /** Current value of the {@link AutoPlayOptions.direction | direction} option. */
+  public get direction() {
+    return this._direction;
+  }
+  /** Current value of the {@link AutoPlayOptions.stopOnHover | stopOnHover} option. */
+  public get stopOnHover() {
+    return this._stopOnHover;
+  }
+  /** Current value of the {@link AutoPlayOptions.stopOnInit | stopOnInit} option. */
+  public get stopOnInit() {
+    return this._stopOnInit;
+  }
+  /** Current value of the {@link AutoPlayOptions.delayAfterHover | delayAfterHover} option. */
+  public get delayAfterHover() {
+    return this._delayAfterHover;
+  }
+  /** Whether the autoplay is currently active
+   * @readonly
+   */
+  public get playing() {
+    return this._playing;
+  }
 
-  public set duration(val: number) { this._duration = val; }
-  public set animationDuration(val: number | undefined) { this._animationDuration = val; }
-  public set direction(val: AutoPlayOptions["direction"]) { this._direction = val; }
-  public set stopOnHover(val: boolean) { this._stopOnHover = val; }
-  public set delayAfterHover(val: number) { this._delayAfterHover = val; }
+  /** Sets {@link AutoPlayOptions.duration | duration}. */
+  public set duration(val: number) {
+    this._duration = val;
+  }
+  /** Sets {@link AutoPlayOptions.animationDuration | animationDuration}. */
+  public set animationDuration(val: number | undefined) {
+    this._animationDuration = val;
+  }
+  /** Sets {@link AutoPlayOptions.direction | direction}. */
+  public set direction(val: AutoPlayOptions["direction"]) {
+    this._direction = val;
+  }
+  /** Sets {@link AutoPlayOptions.stopOnHover | stopOnHover}. */
+  public set stopOnHover(val: boolean) {
+    this._stopOnHover = val;
+  }
+  /** Sets {@link AutoPlayOptions.stopOnInit | stopOnInit}. */
+  public set stopOnInit(val: boolean) {
+    this._stopOnInit = val;
+  }
+  /** Sets {@link AutoPlayOptions.delayAfterHover | delayAfterHover}. */
+  public set delayAfterHover(val: number) {
+    this._delayAfterHover = val;
+  }
 
   /**
-   * @param {AutoPlayOptions} options Options for the AutoPlay instance.<ko>AutoPlay 옵션</ko>
-   * @param {number} options.duration Time to wait before moving on to the next panel.<ko>다음 패널로 움직이기까지 대기 시간</ko>
-   * @param {number | undefined} options.animationDuration Duration of animation of moving to the next panel. If undefined, duration option of the Flicking instance is used instead.<ko>패널이 움직이는 애니메이션의 지속 시간, undefined라면 Flicking 인스턴스의 duration 값을 사용한다</ko>
-   * @param {"PREV" | "NEXT"} options.direction The direction in which the panel moves.<ko>패널이 움직이는 방향</ko>
-   * @param {boolean} options.stopOnHover Whether to stop when mouse hover upon the element.<ko>엘리먼트에 마우스를 올렸을 때 AutoPlay를 정지할지 여부</ko>
-   * @param {number} options.delayAfterHover If stopOnHover is true, the amount of time to wait before moving on to the next panel when mouse leaves the element.<ko>stopOnHover를 사용한다면 마우스가 엘리먼트로부터 나간 뒤 다음 패널로 움직이기까지 대기 시간</ko>
+   * @param options - Options for the AutoPlay instance
    * @example
    * ```ts
    * flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT" }));
    * ```
    */
-  public constructor({
-    duration = 2000,
-    animationDuration = undefined,
-    direction = DIRECTION.NEXT,
-    stopOnHover = false,
-    delayAfterHover
-  }: Partial<AutoPlayOptions> = {}) {
+  public constructor(options: Partial<AutoPlayOptions> = {}) {
+    const {
+      duration = 2000,
+      animationDuration = undefined,
+      direction = DIRECTION.NEXT,
+      stopOnHover = false,
+      stopOnInit = false,
+      delayAfterHover
+    } = options;
+
     this._duration = duration;
     this._animationDuration = animationDuration;
     this._direction = direction;
     this._stopOnHover = stopOnHover;
+    this._stopOnInit = stopOnInit;
     this._delayAfterHover = delayAfterHover ?? duration;
   }
 
+  /** Initialize the plugin and start autoplay on the given Flicking instance.
+   * @param flicking - The Flicking instance to attach this plugin to
+   */
   public init(flicking: Flicking): void {
     if (this._flicking) {
       this.destroy();
@@ -85,9 +158,12 @@ class AutoPlay implements Plugin {
       targetEl.addEventListener("mouseleave", this._onMouseLeave, false);
     }
 
-    this.play();
+    if (!this._stopOnInit) {
+      this.play();
+    }
   }
 
+  /** Destroy the plugin, stop autoplay, and remove all event listeners. */
   public destroy(): void {
     const flicking = this._flicking;
 
@@ -110,14 +186,17 @@ class AutoPlay implements Plugin {
     this._flicking = null;
   }
 
+  /** Update the plugin state. This is a no-op for AutoPlay. */
   public update(): void {
     // DO-NOTHING
   }
 
+  /** Start the autoplay timer. Panels will move automatically after the configured {@link AutoPlayOptions.duration | duration}. */
   public play = () => {
     this._movePanel(this._duration);
   };
 
+  /** Stop the autoplay timer and cancel any pending panel movement. */
   public stop = () => {
     this._playing = false;
     clearTimeout(this._timerId);