Skip to main content

Sync

Synchronizes multiple Flicking instances. Commonly used to link a main image with a thumbnail gallery.

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 on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
type"camera" | "index""camera"Synchronization mode. camera syncs camera position, index syncs by panel index
synchronizedFlickingOptionsSyncOption[][]List of Flicking instances and options to synchronize

SyncOption​

OptionTypeDescription
flickingFlickingFlicking instance to synchronize
isSlidablebooleanWhether dragging to slide is enabled
isClickablebooleanWhether clicking to move to that panel is enabled
activeClassstringCSS class to add to the active panel

Details​

Synchronization Types​

TypeDescriptionUse Case
cameraMoves the camera position of all Flickings simultaneouslyDisplaying the same content in different views
indexWhen a panel is changed in one Flicking, the other Flickings move to the same indexMain image + thumbnail

Framework-specific Usage​

React — Access instances using useRef and 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 — Access instances using ref() and 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" }
    ]
  })];
});

Notes​

Caution
  • The Sync plugin must be created after the Flicking instances are mounted. In React, use useEffect; in Vue, use onMounted.
  • For the index type, the synchronized Flickings must have the same number of panels to work correctly.
  • The plugin only needs to be added (addPlugins) to one of the synchronized Flickings.