Skip to main content

Demos

Panel add / remove

1
2
3
4
5
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>`)
});

Variable Size Panels

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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>
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)