AutoPlay

일정 간격으로 패널을 자동 전환합니다. 마우스 호버 시 일시 정지 기능을 지원합니다.

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

요약

주요 옵션

옵션	타입	기본값	설명
duration	number	2000	패널 전환 간격 (ms)
direction	"NEXT" | "PREV"	"NEXT"	자동 전환 방향
stopOnHover	boolean	false	마우스 호버 시 자동 재생 일시 정지
animationDuration	number	-	패널 전환 애니메이션 시간 (ms)

상세 설명

동작 원리

AutoPlay 플러그인은 설정된 duration 간격마다 지정된 방향으로 패널을 자동 전환합니다. 사용자가 드래그하면 자동 재생이 일시 중단되고, 드래그 종료 후 다시 시작됩니다.

사용법

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

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

제어 메서드

메서드	설명
plugin.stop()	자동 재생 중지
plugin.play()	자동 재생 시작

주의사항

주의

• 끊김 없는 자동 재생을 위해 circular: true 옵션과 함께 사용하세요.
• stopOnHover: true를 설정하면 모바일에서는 터치 시 일시 정지됩니다.

관련 링크

관련 데모

• Fade: 페이드 효과와 함께 사용
• Pagination: 페이지 인디케이터와 함께 사용