Sync

여러 Flicking 인스턴스를 동기화합니다. 대표적으로 메인 이미지와 썸네일 갤러리를 연동할 때 사용합니다.

JavaScript

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

const IMAGES = [
  "https://picsum.photos/seed/sync1/600/300",
  "https://picsum.photos/seed/sync2/600/300",
  "https://picsum.photos/seed/sync3/600/300",
  "https://picsum.photos/seed/sync4/600/300",
  "https://picsum.photos/seed/sync5/600/300",
  "https://picsum.photos/seed/sync6/600/300"
];

const mainCamera = document.querySelector("#main .flicking-camera");
const thumbCamera = document.querySelector("#thumb .flicking-camera");

IMAGES.forEach(src => {
  const mainPanel = document.createElement("div");
  mainPanel.className = "main-panel";
  mainPanel.innerHTML = `<img src="${src}" />`;
  mainCamera.appendChild(mainPanel);

  const thumbPanel = document.createElement("div");
  thumbPanel.className = "thumb-panel";
  thumbPanel.innerHTML = `<img src="${src}" />`;
  thumbCamera.appendChild(thumbPanel);
});

const mainFlicking = new Flicking("#main", { bounce: 30, preventDefaultOnDrag: true });
const thumbFlicking = new Flicking("#thumb", {
  bound: true,
  bounce: 30,
  moveType: "freeScroll",
  preventDefaultOnDrag: true
});

mainFlicking.addPlugins(
  new Sync({
    type: "index",
    synchronizedFlickingOptions: [
      { flicking: mainFlicking, isSlidable: true },
      { flicking: thumbFlicking, isClickable: true, activeClass: "active" }
    ]
  })
);

Open Sandbox

React

import { Sync } from "@egjs/flicking-plugins";
import Flicking from "@egjs/react-flicking";
import { useEffect, useRef, useState } from "react";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";

const IMAGES = [
  "https://picsum.photos/seed/sync1/600/300",
  "https://picsum.photos/seed/sync2/600/300",
  "https://picsum.photos/seed/sync3/600/300",
  "https://picsum.photos/seed/sync4/600/300",
  "https://picsum.photos/seed/sync5/600/300",
  "https://picsum.photos/seed/sync6/600/300"
];

export default function App() {
  const mainRef = useRef(null);
  const thumbRef = useRef(null);
  const [plugins, setPlugins] = useState([]);

  useEffect(() => {
    if (mainRef.current && thumbRef.current) {
      setPlugins([
        new Sync({
          type: "index",
          synchronizedFlickingOptions: [
            { flicking: mainRef.current, isSlidable: true },
            { flicking: thumbRef.current, isClickable: true, activeClass: "active" }
          ]
        })
      ]);
    }
  }, []);

  return (
    <div>
      <Flicking ref={mainRef} plugins={plugins} bounce={30} preventDefaultOnDrag={true}>
        {IMAGES.map((src, i) => (
          <div className="main-panel" key={i}>
            <img src={src} />
          </div>
        ))}
      </Flicking>
      <Flicking
        ref={thumbRef}
        className="thumb-flicking"
        bound={true}
        bounce={30}
        moveType="freeScroll"
        preventDefaultOnDrag={true}
      >
        {IMAGES.map((src, i) => (
          <div className="thumb-panel" key={i}>
            <img src={src} />
          </div>
        ))}
      </Flicking>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <Flicking ref="mainRef" :options="{ bounce: 30, preventDefaultOnDrag: true }" :plugins="plugins">
      <div v-for="(src, i) in IMAGES" :key="i" class="main-panel">
        <img :src="src" />
      </div>
    </Flicking>
    <Flicking ref="thumbRef" class="thumb-flicking"
              :options="{ bound: true, bounce: 30, moveType: 'freeScroll', preventDefaultOnDrag: true }">
      <div v-for="(src, i) in IMAGES" :key="i" class="thumb-panel">
        <img :src="src" />
      </div>
    </Flicking>
  </div>
</template>

<script setup>
import { Sync } from "@egjs/flicking-plugins";
import Flicking from "@egjs/vue3-flicking";
import { onMounted, ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const IMAGES = [
  "https://picsum.photos/seed/sync1/600/300",
  "https://picsum.photos/seed/sync2/600/300",
  "https://picsum.photos/seed/sync3/600/300",
  "https://picsum.photos/seed/sync4/600/300",
  "https://picsum.photos/seed/sync5/600/300",
  "https://picsum.photos/seed/sync6/600/300"
];

const mainRef = ref(null);
const thumbRef = ref(null);
const plugins = ref([]);

onMounted(() => {
  plugins.value = [
    new Sync({
      type: "index",
      synchronizedFlickingOptions: [
        { flicking: mainRef.value, isSlidable: true },
        { flicking: thumbRef.value, isClickable: true, activeClass: "active" }
      ]
    })
  ];
});
</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;
}

.main-panel {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

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

.thumb-panel {
  width: 80px;
  height: 60px;
  margin-right: 5px;
  overflow: hidden;
  opacity: 0.5;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition:
    opacity 0.3s,
    border-color 0.3s;
}

.thumb-panel.active {
  opacity: 1;
  border-color: #3498db;
}

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

.thumb-flicking {
  margin-top: 10px;
}

</style>

Open Sandbox

요약

주요 옵션

옵션	타입	기본값	설명
type	"camera" | "index"	"camera"	동기화 방식. camera는 카메라 위치, index는 패널 인덱스 기준 동기화
synchronizedFlickingOptions	SyncOption[]	[]	동기화할 Flicking 인스턴스와 옵션 목록

SyncOption

옵션	타입	설명
flicking	Flicking	동기화할 Flicking 인스턴스
isSlidable	boolean	드래그로 슬라이드 가능 여부
isClickable	boolean	클릭으로 해당 패널로 이동 가능 여부
activeClass	string	활성 패널에 추가될 CSS 클래스

상세 설명

동기화 타입

타입	설명	사용 예
camera	모든 Flicking의 카메라 위치를 동시에 이동	같은 콘텐츠를 다른 뷰로 표시
index	하나의 Flicking에서 패널을 변경하면 다른 Flicking도 같은 인덱스로 이동	메인 이미지 + 썸네일

프레임워크별 사용법

React — useRef와 useEffect로 인스턴스에 접근합니다:

const mainRef = useRef(null);
const thumbRef = useRef(null);
const [plugins, setPlugins] = useState([]);

useEffect(() => {
  setPlugins([new Sync({
    type: "index",
    synchronizedFlickingOptions: [
      { flicking: mainRef.current, isSlidable: true },
      { flicking: thumbRef.current, isClickable: true, activeClass: "active" }
    ]
  })]);
}, []);

Vue — ref()와 onMounted로 인스턴스에 접근합니다:

const mainRef = ref(null);
const thumbRef = ref(null);
const plugins = ref([]);

onMounted(() => {
  plugins.value = [new Sync({
    type: "index",
    synchronizedFlickingOptions: [
      { flicking: mainRef.value, isSlidable: true },
      { flicking: thumbRef.value, isClickable: true, activeClass: "active" }
    ]
  })];
});

주의사항

주의

• Sync 플러그인은 Flicking 인스턴스가 마운트된 후에 생성해야 합니다. React에서는 useEffect, Vue에서는 onMounted를 사용하세요.
• index 타입에서 동기화된 Flicking들의 패널 수가 같아야 올바르게 동작합니다.
• 플러그인은 동기화 대상 중 하나의 Flicking에만 추가(addPlugins)하면 됩니다.

관련 링크

관련 데모

• Arrow: 화살표 네비게이션과 함께 사용
• Pagination: 페이지 인디케이터와 함께 사용