Default

Flicking의 가장 기본적인 사용법입니다. 필수 HTML 구조와 CSS, 기본 옵션값을 확인할 수 있습니다.

JavaScript

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const _flicking = new Flicking("#flick", {
  align: "center"
});

Open Sandbox

React

import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

export default function App() {
  return (
    <Flicking align="center">
      <div className="flicking-panel panel-1">1</div>
      <div className="flicking-panel panel-2">2</div>
      <div className="flicking-panel panel-3">3</div>
      <div className="flicking-panel panel-4">4</div>
      <div className="flicking-panel panel-5">5</div>
    </Flicking>
  );
}

Open Sandbox

Vue@3

<template>
  <Flicking :options="{ align: 'center' }">
    <div class="flicking-panel panel-1">1</div>
    <div class="flicking-panel panel-2">2</div>
    <div class="flicking-panel panel-3">3</div>
    <div class="flicking-panel panel-4">4</div>
    <div class="flicking-panel panel-5">5</div>
  </Flicking>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import "@egjs/vue3-flicking/dist/flicking.css";
</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 {
  width: 100%;
}

</style>

Open Sandbox

요약

기본 옵션값

아무 옵션 없이 생성하면 다음 기본값이 적용됩니다:

옵션	기본값	설명
align	"center"	패널 정렬 위치
horizontal	true	가로 방향 이동
circular	false	순환 모드 비활성화
bound	false	경계 제한 없음
duration	500	애니메이션 500ms
moveType	"snap"	스냅 이동 방식

필수 요소

요소	필수 여부	설명
.flicking-viewport	필수	Flicking 인스턴스가 연결되는 뷰포트 요소
.flicking-camera	필수	패널들을 담는 컨테이너. 실제로 이동하는 요소
패널 요소들	필수	.flicking-camera의 직계 자식들
flicking.css	필수	기본 스타일시트

상세 설명

HTML 구조

Flicking을 사용하려면 반드시 다음 구조가 필요합니다:

<div class="flicking-viewport">
  <div class="flicking-camera">
    <div class="panel">Panel 1</div>
    <div class="panel">Panel 2</div>
    <div class="panel">Panel 3</div>
  </div>
</div>

• flicking-viewport: 보이는 영역을 정의합니다. overflow: hidden이 적용됩니다.
• flicking-camera: 패널들을 감싸며, 드래그/애니메이션 시 이 요소가 이동합니다.
• 패널: 각 슬라이드 콘텐츠입니다. camera의 직계 자식이어야 합니다.

CSS Import

Flicking CSS를 반드시 import 해야 합니다:

// JavaScript
import "@egjs/flicking/dist/flicking.css";

// React
import "@egjs/react-flicking/dist/flicking.css";

// Vue
import "@egjs/vue3-flicking/dist/flicking.css";

주의사항

필수

flicking.css를 import하지 않으면 패널이 올바르게 배치되지 않습니다. viewport와 camera의 기본 스타일이 정의되어 있습니다.

구조 주의

패널 요소는 반드시 .flicking-camera의 직계 자식이어야 합니다. 중간에 다른 wrapper 요소가 있으면 동작하지 않습니다.

관련 링크

관련 데모

• Alignment: 패널 정렬 옵션
• Circular: 순환 모드
• Movement Types: 이동 방식