본문으로 건너뛰기
버전: Next

Quick Start

Add the script/CSS to the page. (Unlike individual or internal cases, CDN has unpredictable problems with services, so it is better to use your own files.)

<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
});