Default

The most basic usage of Flicking. You can check the required HTML structure, CSS, and default option values.

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

Summary

Default Option Values

When created without any options, the following defaults are applied:

Option	Default	Description
align	"center"	Panel alignment position
horizontal	true	Horizontal movement
circular	false	Circular mode disabled
bound	false	No boundary restriction
duration	500	Animation 500ms
moveType	"snap"	Snap movement type

Required Elements

Element	Required	Description
.flicking-viewport	Required	The viewport element to which the Flicking instance is attached
.flicking-camera	Required	The container that holds the panels. The element that actually moves
Panel elements	Required	Direct children of .flicking-camera
flicking.css	Required	Base stylesheet

Details

HTML Structure

Flicking requires the following structure:

<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: Defines the visible area. overflow: hidden is applied.
• flicking-camera: Wraps the panels and moves during drag/animation.
• Panels: Each slide's content. Must be direct children of the camera.

CSS Import

You must import the Flicking CSS:

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

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

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

Notes

Required

If you do not import flicking.css, panels will not be positioned correctly. It contains the default styles for the viewport and camera.

Structure caution

Panel elements must be direct children of .flicking-camera. It will not work if there are other wrapper elements in between.

Related Links

Related Demos

• Alignment: Panel alignment options
• Circular: Circular mode
• Movement Types: Movement types