Quick Start

• JavaScript
• React
• Vue
• Angular
• Preact

Add the script/CSS to the page.

<script src="https://unpkg.com/@egjs/flicking/dist/flicking.pkgd.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/@egjs/flicking/dist/flicking.css" crossorigin="anonymous" />

Or, you can rather import them if you're using a bundler like webpack or rollup.

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

Then, add some basic HTML layout of Flicking to your page.

<!-- Viewport element -->
<div id="carousel" class="flicking-viewport">
  <!-- Camera element -->
  <div class="flicking-camera">
    <!-- Panels, class names are your choice -->
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
  </div>
</div>

You should add the vertical class to viewport element, if you're making a vertical carousel.

<div class="flicking-viewport vertical">

Then initialize Flicking instance with JavaScript after.

const flicking = new Flicking("#carousel", {
  align: "center",
  circular: true,
  bound: true,
  renderOnlyVisible: true
});