Movement Types

The moveType option controls panel movement and snap behavior. Three modes are available: snap, freeScroll, and strict.

JavaScript

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

// moveType: "snap" (default)
new Flicking("#flick-snap", {
  moveType: "snap",
  align: "center"
});

// moveType: "freeScroll"
new Flicking("#flick-free", {
  moveType: "freeScroll",
  align: "center",
  bound: true
});

// moveType: "strict"
new Flicking("#flick-strict", {
  moveType: "strict",
  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 (
    <div>
      {/* moveType: "snap" (default) */}
      <div className="demo-container">
        <div className="demo-label">moveType: "snap" (default)</div>
        <Flicking moveType="snap" 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>
      </div>

      {/* moveType: "freeScroll" */}
      <div className="demo-container">
        <div className="demo-label">moveType: "freeScroll" (free scroll)</div>
        <Flicking moveType="freeScroll" align="center" bound={true}>
          <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>
      </div>

      {/* moveType: "strict" */}
      <div className="demo-container">
        <div className="demo-label">moveType: "strict" (one panel at a time)</div>
        <Flicking moveType="strict" 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>
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <!-- moveType: "snap" (default) -->
    <div class="demo-container">
      <div class="demo-label">moveType: "snap" (default)</div>
      <Flicking :options="{ moveType: 'snap', 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>
    </div>

    <!-- moveType: "freeScroll" -->
    <div class="demo-container">
      <div class="demo-label">moveType: "freeScroll" (free scroll)</div>
      <Flicking :options="{ moveType: 'freeScroll', align: 'center', bound: true }">
        <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>
    </div>

    <!-- moveType: "strict" -->
    <div class="demo-container">
      <div class="demo-label">moveType: "strict" (one panel at a time)</div>
      <Flicking :options="{ moveType: 'strict', 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>
    </div>
  </div>
</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: 50%;
  height: 120px;
}

</style>

Open Sandbox

Summary

Key Options

Option	Type	Default	Description
moveType	"snap" | "freeScroll" | "strict" | object	"snap"	Movement behavior mode

Comparison by Value

Value	Behavior	Suitable For
"snap"	Snaps by panel unit. Can skip multiple panels depending on drag distance	General carousels, image galleries
"freeScroll"	Free scrolling without snapping. Inertia applied	Horizontal scroll lists, tab bars
"strict"	Moves exactly one panel at a time	Onboarding, step-by-step guides, fullscreen sliders

Details

"snap" in Detail

This is the default. After dragging, it snaps to the nearest panel when released. Multiple panels can be skipped depending on drag speed and distance.

snap with count: You can limit the number of panels to move at once.

moveType: { type: "snap", count: 2 }  // Move up to 2 panels at a time

"freeScroll" in Detail

Moves freely like native scrolling without snapping to panels. Inertia based on drag speed is applied. The current panel index is determined by the panel closest to the center of the screen.

stopAtEdge option: Sets whether to stop at the boundary.

moveType: ["freeScroll", { stopAtEdge: true }]

"strict" in Detail

Moves exactly one panel per flick. No matter how fast you drag, only one panel moves at a time. Use when you need to prevent users from skipping content.

Related Options

• Relationship with bound: In freeScroll mode, it is recommended to use bound: true together. Otherwise, it may scroll beyond the boundaries.
• Relationship with threshold: threshold is the minimum drag distance required for panel transition. Particularly important in strict mode.
• Relationship with duration: Controls the duration of the snap animation.

Use Cases

When to use?

• "snap": General carousels, image galleries, product sliders
• "freeScroll": Horizontal scroll menus, tab bars, tag lists, UI that needs a native scroll feel
• "strict": Onboarding screens, tutorials, step-by-step guides, preventing content skipping

Notes

When using freeScroll

freeScroll mode scrolls beyond boundaries by default. Set bound: true together to restrict the boundaries.

strict mode

strict mode restricts user freedom. Use only when sequential navigation is required, such as onboarding.

Related Links

Related Options

• bound: Boundary restriction (recommended with freeScroll)
• threshold: Minimum drag distance for panel transition
• duration: Animation duration

Related Demos

• Alignment: Panel alignment
• Bound: Boundary restriction mode
• Threshold: Drag threshold