Skip to main content

Demos

Panel add / remove

1
PrependAppend
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel">1</div>
<div class="flicking-panel">2</div>
<div class="flicking-panel">3</div>
<div class="flicking-panel">4</div>
<div class="flicking-panel">5</div>
</div>
</div>
<div class="block is-flex is-justify-content-center">
<span id="btn-prepend" class="button mr-2 is-info is-outlined">Prepend</span>
<span id="btn-append" class="button mr-2 is-info is-outlined">Append</span>
</div>
js
const flicking = new Flicking("#flick", {
renderOnlyVisible: true
});
let minIdx = 1;
let maxIdx = 5;

const prependBtn = document.querySelector("#btn-prepend");
const appendBtn = document.querySelector("#btn-append");

prependBtn.addEventListener("click", () => {
flicking.prepend(`<div class="flicking-panel">${--minIdx}</div>`)
});
appendBtn.addEventListener("click", () => {
flicking.append(`<div class="flicking-panel">${++maxIdx}</div>`)
});

Nested Flickings

1
2.1
2.2
2.3
3.1
3.2
3.3
4
html
<div id="flick1" class="flicking-viewport">
<div className="flicking-panel">1</div>
<div className="flicking-panel nested-wide">
<div id="flick2" class="flicking-viewport">
<div className="flicking-panel">2.1</div>
<div className="flicking-panel">2.2</div>
<div className="flicking-panel">2.3</div>
</div>
</div>
<div className="flicking-panel nested-wide vertical">
<div id="flick3" class="flicking-viewport vertical">
<div className="flicking-panel">3.1</div>
<div className="flicking-panel">3.2</div>
<div className="flicking-panel">3.3</div>
</div>
</div>
<div className="flicking-panel">4</div>
</div>
js
const flicking1 = new Flicking("#flick1");
const flicking2 = new Flicking("#flick2", {
bounce: 0,
bound: true,
nested: true
});
const flicking3 = new Flicking("#flick3", {
bounce: 0,
bound: true,
horizontal: false
});

Variable Size Panels

Flicking uses panel element's real size, and doesn't modify them.

info

Check out the circular option, which provides a continuous loop depending on the Panel's size

1
2
3
4
5
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div style="width: 120px;">1</div>
<div style="width: 20%;">2</div>
<div style="width: 500px;">3</div>
<div style="width: 300px;">4</div>
<div style="width: 100%;">5</div>
</div>
</div>
js
import Flicking from "@egjs/flicking";

const flicking = new Flicking("#flick", {
circular: true
});

Horizontal Scroller

You can easily create iScroll-like horizontal scroller with Flicking

🍎 Apple🍉 Watermelon🥝 Kiwi🍌 Banana🍊 Orange🍋 Lemon🍈 Melon🍑 Peach🍍 Pineapple🍓 Strawberry🍒 Cherry🍔 Hamburger🍕 Pizza🍞 Bread🍜 Ramen🍦 Ice cream🍮 Pudding🍩 Donut🍪 Cookie🍚 Rice🧀 Cheese🌭 Hot dog🥓 Bacon🥪 Sandwich🥛 Milk☕ Coffee🍵 Green tea🍺 Beer🧃 Juice🍷 Wine🥃 Whisky🍸 Cocktail🍶 Sake
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<span class="button mr-2 is-white">🍎 Apple</span>
<span class="button mr-2 is-white">🍉 Watermelon</span>
<span class="button mr-2 is-white">🥝 Kiwi</span>
<span class="button mr-2 is-white">...</span>
</div>
</div>
js
import Flicking from "@egjs/flicking";

const flicking = new Flicking("#flick", {
moveType: "freeScroll",
bound: true
});

Grid

Made with @egjs/grid

8
9
10
11
12
13
1
2
3
4
5
6
7
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div className="grid-panel has-background-primary has-text-white">1</div>
<div id="grid1" className="grid-panel">
<div class="has-background-warning has-text-dark">2</div>
<div class="has-background-danger has-text-white">3</div>
<div class="has-background-info has-text-white">4</div>
<div class="has-background-success has-text-white">5</div>
<div class="has-background-grey has-text-white">6</div>
</div>
<div className="grid-panel has-background-grey-darker has-text-white">7</div>
<div id="grid2" className="grid-panel">
<div class="has-background-light has-text-dark ">8</div>
<div class="has-background-grey has-text-white">9</div>
<div class="has-background-info has-text-white">10</div>
<div class="has-background-success has-text-white">11</div>
<div class="has-background-warning has-text-dark">12</div>
<div class="has-background-danger has-text-white">13</div>
</div>
</div>
</div>
js
import { FrameGrid } from "@egjs/grid";

const flicking = new Flicking("#flick", {
circular: true
});
const grid1 = new FrameGrid("#grid1", {
gap: 10,
frame: [[1, 1, 2, 2], [3, 3, 2, 2], [4, 4, 4, 5]]
});
const grid2 = new FrameGrid("#grid2", {
gap: 10,
frame: [[1, 1, 1, 1], [2, 2, 3, 3], [4, 5, 5, 6]]
});

Vertical Display

21/05/17 Sunny14.0°/17.0°
21/05/18 Cloudy13.0°/23.0°
21/05/19 Rainy11.0°/19.0°
html
<div id="flick" class="flicking-viewport vertical">
<div class="flicking-camera">
<div class="weather-panel">...</div>
<div class="weather-panel">...</div>
<div class="weather-panel">...</div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { AutoPlay } from "@egjs/flicking-plugins";

const flicking = new Flicking("#flick", {
circular: true,
horizontal: false
});

flicking.addPlugins(new AutoPlay());

Date Selector

JAN
FEB
MAR
APR
MAY
JUN
JUL
AUG
SEP
OCT
NVM
DEC
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
2061
2062
2063
2064
2065
2066
2067
2068
2069
html
<div id="flick" class="flicking-viewport vertical">
<div class="flicking-camera">
<div class="date-panel">JAN</div>
<div class="date-panel">FEB</div>
<div class="date-panel">MAR</div>
<div class="date-panel">APR</div>
<div class="date-panel">MAY</div>
<div class="date-panel">JUN</div>
<div class="date-panel">JUL</div>
<div class="date-panel">AUG</div>
<div class="date-panel">SEP</div>
<div class="date-panel">OCT</div>
<div class="date-panel">NVM</div>
<div class="date-panel">DEC</div>
</div>
<div class="date-panel-border"></div>
<div class="shadow-top"></div>
<div class="shadow-bottom"></div>
</div>
js
import Flicking from "@egjs/flicking";

const updateTransform = e => {
e.currentTarget.panels.forEach(panel => {
const rotateVal = -panel.progress * 20;
const sinRot = Math.sin(Math.abs(rotateVal * Math.PI / 180));
const depth = 150 * sinRot * sinRot;
panel.element.style.transform = `translateZ(-${depth}px) rotateX(${rotateVal}deg)`;
});
};
const flicking = new Flicking("#flick", {
horizontal: false
});

flicking.on("ready", updateTransform)
flicking.on("move", updateTransform)

Reactive API demo

Pagination

You can synchronize Flicking with Pagination using currentPanelIndex and totalPanelCount.

1
2
3
4
5
6
7
8
9
10
html
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel">Panel 1</div>
<div class="flicking-panel">Panel 2</div>
<div class="flicking-panel">Panel 3</div>
<div class="flicking-panel">Panel 4</div>
<div class="flicking-panel">Panel 5</div>
</div>
</div>

<div class="pagination"></div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport");
const reactiveObj = connectFlickingReactiveAPI(flicking);

// Connect with Pagination component
const pagination = document.querySelector(".pagination");
const pageNums = Array.from({ length: reactiveObj.totalPanelCount }, (_, i) => {
const div = document.createElement("div");
div.className = `pagination-num ${i === reactiveObj.currentPanelIndex ? "active" : ""}`;
div.textContent = `${i + 1}`;

div.addEventListener("click", () => {
reactiveObj.moveTo(i);
});
return div;
});

pagination.append(...pageNums);

// Update current page
reactiveObj.subscribe("currentPanelIndex", (nextValue) => {
pageNums.forEach((v, i) => {
v.classList.remove("active");
if (i === nextValue) {
v.classList.add("active");
}
});
});

Prev / Next Button

You can synchronize Flicking with Prev/Next buttons using isReachStart and isReachEnd.

1
2
3
4
5
6
7
8
9
10
html
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel">Panel 1</div>
<div class="flicking-panel">Panel 2</div>
<div class="flicking-panel">Panel 3</div>
<div class="flicking-panel">Panel 4</div>
<div class="flicking-panel">Panel 5</div>
</div>
</div>

<div class="controls">
<button class="prev-btn">Previous</button>
<button class="next-btn">Next</button>
</div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport");
const reactiveObj = connectFlickingReactiveAPI(flicking);

// Connect with Prev/Next button
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");

prevBtn.addEventListener("click", () => {
if (!reactiveObj.isReachStart) {
reactiveObj.moveTo(flicking.index - 1);
}
});

nextBtn.addEventListener("click", () => {
if (!reactiveObj.isReachEnd) {
reactiveObj.moveTo(flicking.index + 1);
}
});

// Update button state
reactiveObj.subscribe("isReachStart", (nextValue) => {
prevBtn.disabled = nextValue;
});

reactiveObj.subscribe("isReachEnd", (nextValue) => {
nextBtn.disabled = nextValue;
});

Progress Bar

You can synchronize Flicking with Progress Bar using progress.

1
2
3
4
5
6
7
8
9
10
Progress: 0.0%
html
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel">Panel 1</div>
<div class="flicking-panel">Panel 2</div>
<div class="flicking-panel">Panel 3</div>
<div class="flicking-panel">Panel 4</div>
<div class="flicking-panel">Panel 5</div>
</div>
</div>

<div class="progress-container">
<div class="progress-bar"></div>
<div class="progress-text">Progress: 0%</div>
</div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport", {
moveType: "free-scroll"
});
const reactiveObj = connectFlickingReactiveAPI(flicking);

// Connect with Progress Bar
const progressBar = document.querySelector(".progress-bar");
const progressText = document.querySelector(".progress-text");

reactiveObj.subscribe("progress", (nextValue) => {
progressBar.style.width = `${nextValue}%`;
progressText.textContent = `Progress: ${nextValue.toFixed(1)}%`;
});

Parallax

You can create a Parallax effect for each panel using indexProgress.

html
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel skelton-panel has-background-primary is-size-1">
<span class="skeleton-bar skeleton-bar-size4 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size1 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size2 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
</div>
<div class="flicking-panel skelton-panel has-background-primary is-size-1">
<span class="skeleton-bar skeleton-bar-size4 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size1 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size2 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
</div>
<div class="flicking-panel skelton-panel has-background-primary is-size-1">
<span class="skeleton-bar skeleton-bar-size4 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size1 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size2 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
</div>
<div class="flicking-panel skelton-panel has-background-primary is-size-1">
<span class="skeleton-bar skeleton-bar-size4 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size1 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size2 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
</div>
<div class="flicking-panel skelton-panel has-background-primary is-size-1">
<span class="skeleton-bar skeleton-bar-size4 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size1 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size2 parallax-element"></span>
<span class="skeleton-bar skeleton-bar-size3 parallax-element"></span>
</div>
</div>
</div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport");
const reactiveObj = connectFlickingReactiveAPI(flicking);

// Implement Parallax effect
reactiveObj.subscribe("indexProgress", (nextValue) => {
const panels = document.querySelectorAll(".flicking-panel");
panels.forEach((panel, index) => {
const childProgress = index - nextValue;
const opacity = Math.min(Math.max(1 - Math.abs(childProgress), 0), 1);

const elements = panel.querySelectorAll(".parallax-element");
elements.forEach((element, i) => {
element.style.transform = `translate(${childProgress * (180 - i * 20)}px)`;
element.style.opacity = opacity;
});
});
});

Slide Over

You can create a Slide Over effect using indexProgress.

1
2
3
4
5
html
<div class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel">Panel 1</div>
<div class="flicking-panel">Panel 2</div>
<div class="flicking-panel">Panel 3</div>
<div class="flicking-panel">Panel 4</div>
<div class="flicking-panel">Panel 5</div>
</div>
</div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport", {
circular: true
});
const reactiveObj = connectFlickingReactiveAPI(flicking);

const panels = document.querySelectorAll(".flicking-panel");
const length = panels.length;

// Implement Slide Over effect
reactiveObj.subscribe("indexProgress", (nextValue) => {
panels.forEach((panel, index) => {
const childProgress = (index - nextValue + length * 1.5) % length - length * 0.5;
const pos = childProgress < 0 ? -childProgress * 100 : 0;
const scale = childProgress < 0 ? Math.max(0, 1 - Math.abs(childProgress)) : 1;

panel.style.transform = `translate(${pos}%) scale(${scale})`;
});
});

Cover flow

You can create a Cover flow UI using indexProgress.

1
2
3
4
5
html
<div class="flicking-viewport flicking-coverflow">
<div class="flicking-camera">
<div class="flicking-panel">Panel 1</div>
<div class="flicking-panel">Panel 2</div>
<div class="flicking-panel">Panel 3</div>
<div class="flicking-panel">Panel 4</div>
<div class="flicking-panel">Panel 5</div>
</div>
</div>
js
import Flicking, { connectFlickingReactiveAPI } from "@egjs/flicking";

const flicking = new Flicking(".flicking-viewport", {
circular: true
});
const reactiveObj = connectFlickingReactiveAPI(flicking);

const panels = document.querySelectorAll(".flicking-panel");
const length = panels.length;

// Implement Cover flow effect
reactiveObj.subscribe("indexProgress", (nextValue) => {
panels.forEach((panel, index) => {
const childProgress = (index - nextValue + length * 1.5) % length - length * 0.5;
const scale = Math.max(0, 0.9 - Math.abs(childProgress) * 0.2);

panel.style.transformOrigin = `${50 - childProgress * 50}% 50%`;
panel.style.transform = `rotateY(${-childProgress * 50}deg) scale(${scale})`;
});
});