AutoPlay

Automatically transitions panels at regular intervals. Supports pause on mouse hover.

JavaScript

import Flicking from "@egjs/flicking";
import { AutoPlay } from "@egjs/flicking-plugins";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const flicking = new Flicking("#flick", {
  circular: true,
  preventDefaultOnDrag: true
});

flicking.addPlugins(
  new AutoPlay({
    duration: 2000,
    direction: "NEXT",
    stopOnHover: true
  })
);

Open Sandbox

React

import { AutoPlay } from "@egjs/flicking-plugins";
import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const plugins = [new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: true })];

export default function App() {
  return (
    <Flicking circular={true} plugins={plugins} preventDefaultOnDrag={true}>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/auto1/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/auto2/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/auto3/600/300" />
      </div>
      <div className="flicking-panel">
        <img className="panel-image" src="https://picsum.photos/seed/auto4/600/300" />
      </div>
    </Flicking>
  );
}

Open Sandbox

Vue@3

<template>
  <Flicking :options="{ circular: true, preventDefaultOnDrag: true }" :plugins="plugins">
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/auto1/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/auto2/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/auto3/600/300" />
    </div>
    <div class="flicking-panel">
      <img class="panel-image" src="https://picsum.photos/seed/auto4/600/300" />
    </div>
  </Flicking>
</template>

<script setup>
import { AutoPlay } from "@egjs/flicking-plugins";
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";

const plugins = [new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: true })];
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  position: relative;
  border-radius: 5px;
  width: 80%;
  margin-right: 10px;
  height: 200px;
  overflow: hidden;
}

.panel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>

Open Sandbox

Summary

Key Options

Option	Type	Default	Description
duration	number	2000	Interval between panel transitions (ms)
direction	"NEXT" | "PREV"	"NEXT"	Direction of automatic transition
stopOnHover	boolean	false	Pause autoplay on mouse hover
animationDuration	number	-	Duration of the panel transition animation (ms)

Details

How It Works

The AutoPlay plugin automatically transitions panels in the specified direction at every duration interval. When the user drags, autoplay pauses and resumes after the drag ends.

Usage

import { AutoPlay } from "@egjs/flicking-plugins";

flicking.addPlugins(new AutoPlay({
  duration: 2000,
  direction: "NEXT",
  stopOnHover: true
}));

Control Methods

Method	Description
plugin.stop()	Stop autoplay
plugin.play()	Start autoplay

Notes

Caution

• For seamless autoplay, use it together with the circular: true option.
• When stopOnHover: true is set, it pauses on touch on mobile devices.

Related Links

Related Demos

• Fade: Use with fade effect
• Pagination: Use with page indicator