Plugins
All plugins are available by installing @egjs/flicking-plugins
npm install @egjs/flicking-plugins
How to use
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
import { AutoPlay } from "@egjs/flicking-plugins";
flicking.addPlugins(new AutoPlay({ duration: 2000, direction: "NEXT", stopOnHover: false }));
info
Some plugins require additional CSS for display buttons.
You can import them from your node_modules
folder,
import "@egjs/flicking-plugins/dist/flicking-plugins.css";
Or, you can download them from CDN like
<link rel="stylesheet" href="https://naver.github.io/egjs-flicking-plugins/release/latest/dist/flicking-plugins.css">
These are the available CSS files:
- flicking-plugins.css (bundled)
- flicking-plugins.min.css
- arrow.css
- arrow.min.css
- pagination.css
- pagination.min.css
Autoplay
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { Autoplay } from "@egjs/flicking-plugins";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Autoplay());
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Autoplay()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Autoplay()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Autoplay()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent {
public plugins: Plugin[] = [new Autoplay()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Autoplay()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Autoplay } from "@egjs/flicking-plugins";
const plugins = [new Autoplay()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>
style
.plugins-panel {
position: relative;
border-radius: 5px;
width: 80%;
margin-right: 10px;
height: 200px;
overflow: hidden;
}
.panel-image {
top: -100%;
bottom: -100%;
width: 100%;
margin: auto;
position: absolute;
left: 50%;
transform: translate(-50%);
}
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
options | object | ✔️ | {} | Options for the AutoPlay instance |
options.duration | number | ✔️ | 2000 | Time to wait before moving on to the next panel |
options.animationDuration | number | undefined | ✔️ | undefined | Duration of animation of moving to the next panel. If undefined, the duration option of the Flicking instance is used instead |
options.direction | "PREV" | "NEXT" | ✔️ | "NEXT" | The direction in which the panel moves |
options.stopOnHover | boolean | ✔️ | false | Whether to stop when mouse hover upon the element |
options.delayAfterHover | number | ✔️ | options.duration | If stopOnHover is true, the amount of time to wait before moving on to the next panel when mouse leaves the element |
Parallax
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport parallax">
<div class="flicking-camera">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { Parallax } from "@egjs/flicking-plugins";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Parallax({
"img"
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Parallax } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Parallax("img")];
public render() {
return <Flicking className="parallax" circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
template
<Flicking class="parallax" :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Parallax } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Parallax("img")]
}
}
}
template
<Flicking class="parallax" :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Parallax } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Parallax("img")]
}
}
}
demo.component.html
<ngx-flicking className="parallax" [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Parallax } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent {
public plugins: Plugin[] = [new Parallax("img")];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Parallax } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Parallax("img")];
public render() {
return <Flicking className="parallax" circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Parallax } from "@egjs/flicking-plugins";
const plugins = [new Parallax("img")];
</script>
<Flicking class="parallax" options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>
style
.plugins-panel {
position: relative;
border-radius: 5px;
width: 80%;
margin-right: 10px;
height: 200px;
overflow: hidden;
}
.panel-image {
top: -100%;
bottom: -100%;
width: 100%;
margin: auto;
position: absolute;
left: 50%;
transform: translate(-50%);
}
/* Notice that the element that you apply the effect must have a different size than the Panel. */
.parallax .panel-image {
width: 150%;
max-width: 150%;
}
danger
If the element that you apply the Parallax effect has the same size as the Panel element, the plugin may not work. You need to set a different size than the Panel element.
For example, in this demo the .panel-image has width: 150% property on it.
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
selector | string | ✔️ | "" | Selector of the element to apply parallax effect |
scale | number | ✔️ | 1 | Effect amplication scale |
Fade
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { Fade } from "@egjs/flicking-plugins";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Fade());
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Fade } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Fade()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Fade } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Fade()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Fade } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Fade()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></div>
<div flicking-panel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Fade } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent {
public plugins: Plugin[] = [new Fade()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Fade } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Fade()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg01.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg02.jpg" /></div>
<div className="plugins-panel"><img className="panel-image" src="/img/demo/bg03.jpg" /></div>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Fade } from "@egjs/flicking-plugins";
const plugins = [new Fade()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg01.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg02.jpg" /></FlickingPanel>
<FlickingPanel class="plugins-panel"><img class="panel-image" src="/img/demo/bg03.jpg" /></FlickingPanel>
</Flicking>
style
.plugins-panel {
position: relative;
border-radius: 5px;
width: 80%;
margin-right: 10px;
height: 200px;
overflow: hidden;
}
.panel-image {
top: -100%;
bottom: -100%;
width: 100%;
margin: auto;
position: absolute;
left: 50%;
transform: translate(-50%);
}
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
selector | string | ✔️ | "" | The selector of the element to which the fade effect is to be applied. If the selector is blank, it applies to panel element |
scale | number | ✔️ | 1 | Effect amplication scale |
Arrow
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</div>
<span class="flicking-arrow-prev"></span>
<span class="flicking-arrow-next"></span>
</div>
js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Arrow());
DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<ViewportSlot>
<span className="flicking-arrow-prev"></span>
<span className="flicking-arrow-next"></span>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<span slot="viewport" class="flicking-arrow-prev"></span>
<span slot="viewport" class="flicking-arrow-next"></span>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<template #viewport>
<span class="flicking-arrow-prev"></span>
<span class="flicking-arrow-next"></span>
</template>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
<span in-viewport class="flicking-arrow-prev"></span>
<span in-viewport class="flicking-arrow-next"></span>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/arrow.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Arrow()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<ViewportSlot>
<span className="flicking-arrow-prev"></span>
<span className="flicking-arrow-next"></span>
</ViewportSlot>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const plugins = [new Arrow()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
<svelte:fragment slot="viewport">
<span class="flicking-arrow-prev"></span>
<span class="flicking-arrow-next"></span>
</svelte:fragment>
</Flicking>
style
.card-panel {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
max-width: 100%;
font-size: 3rem;
margin: 0.5rem;
width: 50%;
height: 200px;
padding: 30px 20px;
box-sizing: border-box;
overflow: hidden;
}
.flicking-index {
position: relative;
min-width: 60px;
text-align: center;
}
.flicking-index::after {
position: absolute;
content: "PANEL";
font-weight: bold;
left: 0;
bottom: -1.2rem;
width: 100%;
text-align: center;
font-size: 1rem;
}
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</div>
<span class="flicking-arrow-prev is-circle"></span>
<span class="flicking-arrow-next is-circle"></span>
</div>
js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Arrow());
DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<ViewportSlot>
<span className="flicking-arrow-prev is-circle"></span>
<span className="flicking-arrow-next is-circle"></span>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<span slot="viewport" class="flicking-arrow-prev is-circle"></span>
<span slot="viewport" class="flicking-arrow-next is-circle"></span>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<template #viewport>
<span class="flicking-arrow-prev is-circle"></span>
<span class="flicking-arrow-next is-circle"></span>
</template>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
<span in-viewport class="flicking-arrow-prev is-circle"></span>
<span in-viewport class="flicking-arrow-next is-circle"></span>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/arrow.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Arrow()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<ViewportSlot>
<span className="flicking-arrow-prev is-circle"></span>
<span className="flicking-arrow-next is-circle"></span>
</ViewportSlot>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const plugins = [new Arrow()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
<svelte:fragment slot="viewport">
<span class="flicking-arrow-prev is-circle"></span>
<span class="flicking-arrow-next is-circle"></span>
</svelte:fragment>
</Flicking>
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</div>
</div>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>
js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Arrow());
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <>
<Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
</Flicking>
<span className="flicking-arrow-prev is-outside"></span>
<span className="flicking-arrow-next is-outside"></span>
</>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>
script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>
script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
</ngx-flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/arrow.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Arrow()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <>
<Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
</Flicking>
<span className="flicking-arrow-prev is-outside"></span>
<span className="flicking-arrow-next is-outside"></span>
</>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const plugins = [new Arrow()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
</Flicking>
<span class="flicking-arrow-prev is-outside"></span>
<span class="flicking-arrow-next is-outside"></span>
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</div>
</div>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>
js
import Flicking from "@egjs/flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Arrow());
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <>
<Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
</Flicking>
<span className="flicking-arrow-prev is-thin"></span>
<span className="flicking-arrow-next is-thin"></span>
</>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>
script
import Flicking from "@egjs/vue-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>
script
import Flicking from "@egjs/vue3-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Arrow()]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
</ngx-flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Arrow } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/arrow.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Arrow()];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
export default class DemoComponent extends Component {
private _plugins = [new Arrow()];
public render() {
return <>
<Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
</Flicking>
<span className="flicking-arrow-prev is-thin"></span>
<span className="flicking-arrow-next is-thin"></span>
</>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Arrow } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/arrow.css";
const plugins = [new Arrow()];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
</Flicking>
<span class="flicking-arrow-prev is-thin"></span>
<span class="flicking-arrow-next is-thin"></span>
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
parentEl | HTMLElement | null | ✔️ | null | The parent element to query prevElSelector and nextElSelector . If null is given, it will search the element inside wrapper element(.flicking-viewport ) of Flicking. |
prevElSelector | string | ✔️ | ".flicking-arrow-prev" | CSS selector to find query the prev arrow element |
nextElSelector | string | ✔️ | ".flicking-arrow-next" | CSS selector to find query the next arrow element |
disabledClass | string | ✔️ | "flicking-arrow-disabled" | A class to apply when Flicking reachs edge |
moveCount | number | ✔️ | 1 | A number of skipping panels with one click |
moveByViewportSize | boolean | ✔️ | false | Effective for "freeScroll" moveType, enabling this will scroll camera by the size of viewport per click |
Pagination
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
</div>
<div class="flicking-pagination"></div>
</div>
js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Pagination({
type: "bullet"
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'bullet' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<div slot="viewport" class="flicking-pagination"></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'bullet' })]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<template #viewport>
<div class="flicking-pagination"></div>
</template>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'bullet' })]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
<div in-viewport class="flicking-pagination"></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/pagination.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Pagination({ type: 'bullet' })];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'bullet' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const plugins = [new Pagination({ type: 'bullet' })];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
<svelte:fragment slot="viewport">
<div class="flicking-pagination"></div>
</svelte:fragment>
</Flicking>
style
.flicking-viewport {
padding-bottom: 3rem !important;
}
.card-panel {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
max-width: 100%;
font-size: 3rem;
margin: 0.5rem;
width: 50%;
height: 200px;
padding: 30px 20px;
box-sizing: border-box;
overflow: hidden;
}
.flicking-index {
position: relative;
min-width: 60px;
text-align: center;
}
.flicking-index::after {
position: absolute;
content: "PANEL";
font-weight: bold;
left: 0;
bottom: -1.2rem;
width: 100%;
text-align: center;
font-size: 1rem;
}
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
</div>
<div class="flicking-pagination"></div>
</div>
js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Pagination({
type: "fraction"
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'fraction' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<div slot="viewport" class="flicking-pagination"></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'fraction' })]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<template #viewport>
<div class="flicking-pagination"></div>
</template>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'fraction' })]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
<div in-viewport class="flicking-pagination"></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/pagination.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Pagination({ type: 'fraction' })];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'fraction' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const plugins = [new Pagination({ type: 'fraction' })];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
<svelte:fragment slot="viewport">
<div class="flicking-pagination"></div>
</svelte:fragment>
</Flicking>
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
</div>
<div class="flicking-pagination"></div>
</div>
js
import Flicking from "@egjs/flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Pagination({
type: "scroll"
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'scroll' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<div slot="viewport" class="flicking-pagination"></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'scroll' })]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel"><span class="flicking-index">1</span></div>
<div class="card-panel"><span class="flicking-index">2</span></div>
<div class="card-panel"><span class="flicking-index">3</span></div>
<div class="card-panel"><span class="flicking-index">4</span></div>
<div class="card-panel"><span class="flicking-index">5</span></div>
<div class="card-panel"><span class="flicking-index">6</span></div>
<div class="card-panel"><span class="flicking-index">7</span></div>
<div class="card-panel"><span class="flicking-index">8</span></div>
<template #viewport>
<div class="flicking-pagination"></div>
</template>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Pagination({ type: 'scroll' })]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">3</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">4</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">5</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">6</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">7</span></div>
<div flicking-panel class="card-panel"><span class="flicking-index">8</span></div>
<div in-viewport class="flicking-pagination"></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Pagination } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html',
styleUrls: [
"../node_modules/@egjs/flicking-plugins/dist/pagination.css"
]
})
export class DemoComponent {
public plugins: Plugin[] = [new Pagination({ type: 'scroll' })];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking, { ViewportSlot } from "@egjs/preact-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
export default class DemoComponent extends Component {
private _plugins = [new Pagination({ type: 'scroll' })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel"><span className="flicking-index">1</span></div>
<div className="card-panel"><span className="flicking-index">2</span></div>
<div className="card-panel"><span className="flicking-index">3</span></div>
<div className="card-panel"><span className="flicking-index">4</span></div>
<div className="card-panel"><span className="flicking-index">5</span></div>
<div className="card-panel"><span className="flicking-index">6</span></div>
<div className="card-panel"><span className="flicking-index">7</span></div>
<div className="card-panel"><span className="flicking-index">8</span></div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Pagination } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
const plugins = [new Pagination({ type: 'scroll' })];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">3</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">4</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">5</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">6</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">7</span></FlickingPanel>
<FlickingPanel class="card-panel"><span class="flicking-index">8</span></FlickingPanel>
<svelte:fragment slot="viewport">
<div class="flicking-pagination"></div>
</svelte:fragment>
</Flicking>
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
parentEl | HTMLElement | null | ✔️ | null | The parent element to query selector . If null is given, it will search the element inside wrapper element(.flicking-viewport ) of Flicking. |
selector | string | ✔️ | ".flicking-pagination" | CSS selector to find query the pagination element |
type | "bullet" | "fraction" | "scroll" | ✔️ | "bullet" | A style of pagination to apply |
classPrefix | string | ✔️ | "flicking-pagination" | A class prefix for automatically generated elements |
bulletCount | number | ✔️ | 5 | A number of visual bullets when "scroll" type is chosen |
renderBullet | function | ✔️ | (className: string) => `<span class="${className}"></span>` | A render function for bullets, effective for "bullet" and "scroll" type |
renderActiveBullet | function | null | ✔️ | null | A render function for the active(selected) bullet, effective for "bullet" and "scroll" type. If null is given, renderBullet will be used instead. |
renderFraction | function | ✔️ | (currentClass: string, totalClass: string) => `<span class="${currentClass}"></span>/<span class="${totalClass}"></span>` | A render function for fraction, effective for "fration" type |
fractionCurrentFormat | function | ✔️ | (index: number) => index.toString() | A format to display a current index inside fraction-current class |
fractionTotalFormat | function | ✔️ | (index: number) => index.toString() | A format to display a total panels count inside fraction-total class |
scrollOnChange | function | ✔️ | (index: number, ctx: ScrollContext) => ctx.moveTo(index) | A callback function triggered when the active bullet changes |
Sync
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick0" 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>
<div id="flick1" class="flicking-viewport">
<div class="flicking-camera">
<span class="button mr-2 is-white">🍔 Hamburger</span>
<span class="button mr-2 is-white">🍕 Pizza</span>
<span class="button mr-2 is-white">🍞 Bread</span>
<span class="button mr-2 is-white">...</span>
</div>
</div>
<div id="flick2" class="flicking-viewport">
<div class="flicking-camera">
<span class="button mr-2 is-white">🥛 Milk</span>
<span class="button mr-2 is-white">☕ Coffee</span>
<span class="button mr-2 is-white">🍵 Green tea</span>
<span class="button mr-2 is-white">...</span>
</div>
</div>
js
import Flicking, { ALIGN } from "@egjs/flicking";
import { Sync } from "@egjs/flicking-plugins";
const flicking0 = new Flicking("#flick0", {
bound: true,
bounce: 30,
align: ALIGN.PREV
});
const flicking1 = new Flicking("#flick1", {
bound: true,
bounce: 30,
align: ALIGN.PREV
});
const flicking2 = new Flicking("#flick2", {
bound: true,
bounce: 30,
align: ALIGN.PREV
});
flicking0.addPlugins(new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: flicking0,
isClickable: false
},
{
flicking: flicking1,
isClickable: false
},
{
flicking: flicking2,
isClickable: false
}
]
}));
export default () => {
const flicking0 = useRef();
const flicking1 = useRef();
const flicking2 = useRef();
const [plugins, setPlugins] = useState([]);
useEffect(() => {
setPlugins([new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: flicking0.current,
isClickable: false
},
{
flicking: flicking1.current,
isClickable: false
},
{
flicking: flicking2.current,
isClickable: false
}
]
})]);
}, []);
return <Flicking ref={flicking0}
className="mb-4"
align="prev"
bound={true}
bounce={30}
plugins={plugins}>
<span className="button mr-2 is-white">🍎 Apple</span>
<span className="button mr-2 is-white">🍉 Watermelon</span>
<span className="button mr-2 is-white">🥝 Kiwi</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
<Flicking ref={flicking1}
className="mb-4"
align="prev"
bound={true}
bounce={30}>
<span className="button mr-2 is-white">🍔 Hamburger</span>
<span className="button mr-2 is-white">🍕 Pizza</span>
<span className="button mr-2 is-white">🍞 Bread</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
<Flicking ref={flicking2}
align="prev"
bound={true}
bounce={30}>
<span className="button mr-2 is-white">🥛 Milk</span>
<span className="button mr-2 is-white">☕ Coffee</span>
<span className="button mr-2 is-white">🍵 Green tea</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
};
<template>
<div class="wrapper">
<flicking ref="flicking0" :options="{ bound: true, bounce: 30, align: 'prev' }" :plugins="plugins">
<span className="button mr-2 is-white">🍎 Apple</span>
<span className="button mr-2 is-white">🍉 Watermelon</span>
<span className="button mr-2 is-white">🥝 Kiwi</span>
<span className="button mr-2 is-white">...</span>
</flicking>
<flicking ref="flicking1" :options="{ bound: true, bounce: 30, align: 'prev' }">
<span className="button mr-2 is-white">🍔 Hamburger</span>
<span className="button mr-2 is-white">🍕 Pizza</span>
<span className="button mr-2 is-white">🍞 Bread</span>
<span className="button mr-2 is-white">...</span>
</flicking>
<flicking ref="flicking2" :options="{ bound: true, bounce: 30, align: 'prev' }">
<span className="button mr-2 is-white">🥛 Milk</span>
<span className="button mr-2 is-white">☕ Coffee</span>
<span className="button mr-2 is-white">🍵 Green tea</span>
<span className="button mr-2 is-white">...</span>
</flicking>
</div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";
export default {
data() {
return {
plugins: []
}
},
mounted() {
this.plugins = [new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: this.$refs.flicking0,
isClickable: false
},
{
flicking: this.$refs.flicking1,
isClickable: false
},
{
flicking: this.$refs.flicking2,
isClickable: false
}
]
})];
}
}
</script>
<template>
<div class="wrapper">
<flicking ref="flicking0" :options="{ bound: true, bounce: 30, align: 'prev' }" :plugins="plugins">
<span className="button mr-2 is-white">🍎 Apple</span>
<span className="button mr-2 is-white">🍉 Watermelon</span>
<span className="button mr-2 is-white">🥝 Kiwi</span>
<span className="button mr-2 is-white">...</span>
</flicking>
<flicking ref="flicking1" :options="{ bound: true, bounce: 30, align: 'prev' }">
<span className="button mr-2 is-white">🍔 Hamburger</span>
<span className="button mr-2 is-white">🍕 Pizza</span>
<span className="button mr-2 is-white">🍞 Bread</span>
<span className="button mr-2 is-white">...</span>
</flicking>
<flicking ref="flicking2" :options="{ bound: true, bounce: 30, align: 'prev' }">
<span className="button mr-2 is-white">🥛 Milk</span>
<span className="button mr-2 is-white">☕ Coffee</span>
<span className="button mr-2 is-white">🍵 Green tea</span>
<span className="button mr-2 is-white">...</span>
</flicking>
</div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";
export default {
data() {
return {
plugins: []
}
},
mounted() {
this.plugins = [new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: this.$refs.flicking0,
isClickable: false
},
{
flicking: this.$refs.flicking1,
isClickable: false
},
{
flicking: this.$refs.flicking2,
isClickable: false
}
]
})];
}
}
</script>
app.component.html
<ngx-flicking #flicking0 [options]="{ bound: true, bounce: 30, align: 'prev' }" [plugins]="plugins">
<span flicking-panel class="button mr-2 is-white">🍎 Apple</span>
<span flicking-panel class="button mr-2 is-white">🍉 Watermelon</span>
<span flicking-panel class="button mr-2 is-white">🥝 Kiwi</span>
<span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>
<ngx-flicking #flicking1 [options]="{ bound: true, bounce: 30, align: 'prev' }">
<span flicking-panel class="button mr-2 is-white">🍔 Hamburger</span>
<span flicking-panel class="button mr-2 is-white">🍕 Pizza</span>
<span flicking-panel class="button mr-2 is-white">🍞 Bread</span>
<span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>
<ngx-flicking #flicking2 [options]="{ bound: true, bounce: 30, align: 'prev' }">
<span flicking-panel class="button mr-2 is-white">🥛 Milk</span>
<span flicking-panel class="button mr-2 is-white">☕ Coffee</span>
<span flicking-panel class="button mr-2 is-white">🍵 Green tea</span>
<span flicking-panel class="button mr-2 is-white">...</span>
</ngx-flicking>
app.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Sync } from "@egjs/flicking-plugins";
@Component({})
export class DemoComponent {
@ViewChild("flicking0", { static: true }) flicking0: NgxFlickingComponent;
@ViewChild("flicking1", { static: true }) flicking1: NgxFlickingComponent;
@ViewChild("flicking2", { static: true }) flicking2: NgxFlickingComponent;
public plugins: Plugin[] = [];
public ngOnInit() {
this.plugins = [new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: this.flicking0,
isClickable: false
},
{
flicking: this.flicking1,
isClickable: false
},
{
flicking: this.flicking2,
isClickable: false
}
]
})]
}
}
export default () => {
const flicking0 = useRef();
const flicking1 = useRef();
const flicking2 = useRef();
const [plugins, setPlugins] = useState([]);
useEffect(() => {
setPlugins([new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: flicking0.current,
isClickable: false
},
{
flicking: flicking1.current,
isClickable: false
},
{
flicking: flicking2.current,
isClickable: false
}
]
})]);
}, []);
return <Flicking ref={flicking0}
className="mb-4"
align="prev"
bound={true}
bounce={30}
plugins={plugins}>
<span className="button mr-2 is-white">🍎 Apple</span>
<span className="button mr-2 is-white">🍉 Watermelon</span>
<span className="button mr-2 is-white">🥝 Kiwi</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
<Flicking ref={flicking1}
className="mb-4"
align="prev"
bound={true}
bounce={30}>
<span className="button mr-2 is-white">🍔 Hamburger</span>
<span className="button mr-2 is-white">🍕 Pizza</span>
<span className="button mr-2 is-white">🍞 Bread</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
<Flicking ref={flicking2}
align="prev"
bound={true}
bounce={30}>
<span className="button mr-2 is-white">🥛 Milk</span>
<span className="button mr-2 is-white">☕ Coffee</span>
<span className="button mr-2 is-white">🍵 Green tea</span>
<span className="button mr-2 is-white">...</span>
</Flicking>
};
<script>
import { onMount } from "svelte";
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Sync } from "@egjs/flicking-plugins";
import "@egjs/svelte-flicking/dist/flicking.css";
let flicking0;
let flicking1;
let flicking2;
let plugins = [];
onMount(() => {
plugins = [new Sync({
type: "camera",
synchronizedFlickingOptions: [
{
flicking: flicking0.vanillaFlicking,
isClickable: false
},
{
flicking: flicking1.vanillaFlicking,
isClickable: false
},
{
flicking: flicking2.vanillaFlicking,
isClickable: false
}
]
})];
});
</script>
<Flicking bind:this={flicking0} class="mb-4"
options={{ align: "prev", bound: true, bounce: 30 }}
plugins={plugins}>
<FlickingPanel class="button mr-2 is-white">🍎 Apple</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">🍉 Watermelon</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">🥝 Kiwi</FlickingPanel>
</Flicking>
<Flicking bind:this={flicking1} class="mb-4"
options={{ align: "prev", bound: true, bounce: 30 }}>
<FlickingPanel class="button mr-2 is-white">🍔 Hamburger</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">🍕 Pizza</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">🍞 Bread</FlickingPanel>
</Flicking>
<Flicking bind:this={flicking2} class="mb-4"
options={{ align: "prev", bound: true, bounce: 30 }}>
<FlickingPanel class="button mr-2 is-white">🥛 Milk</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">☕ Coffee</FlickingPanel>
<FlickingPanel class="button mr-2 is-white">🍵 Green tea</FlickingPanel>
</Flicking>
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick0" class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg06.jpg" />
</div>
</div>
</div>
<div id="flick1" class="flicking-viewport">
<div class="flicking-camera">
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</div>
</div>
js
import Flicking, { MOVE_TYPE } from "@egjs/flicking";
import { Sync } from "@egjs/flicking-plugins";
const flicking0 = new Flicking("#flick0", {
bounce: 30
});
const flicking1 = new Flicking("#flick1", {
bound: true,
bounce: 30,
moveType: MOVE_TYPE.FREE_SCROLL
});
flicking0.addPlugins(new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: flicking0,
isSlidable: true
},
{
flicking: flicking1,
isClickable: true,
activeClass: "active"
}
]
}));
export default () => {
const flicking0 = useRef();
const flicking1 = useRef();
const [plugins, setPlugins] = useState([]);
useEffect(() => {
setPlugins([new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: flicking0.current,
isSlidable: true
},
{
flicking: flicking1.current,
isClickable: true,
activeClass: "active"
}
]
})]);
}, []);
return <Flicking ref={flicking0}
className="mb-4"
bounce={30}
plugins={plugins}>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg06.jpg" />
</div>
</Flicking>
<Flicking ref={flicking1}
moveType="freeScroll"
bound={true}
bounce={30}>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</Flicking>
};
<template>
<div class="wrapper">
<flicking ref="flicking0" :options="{ bounce: 30 }" :plugins="plugins">
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg06.jpg" />
</div>
</flicking>
<flicking ref="flicking1" :options="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</flicking>
</div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";
export default {
data() {
return {
plugins: []
}
},
mounted() {
this.plugins = [new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: this.$refs.flicking0,
isSlidable: true
},
{
flicking: this.$refs.flicking1,
isClickable: true,
activeClass: "active"
}
]
})];
}
}
</script>
<template>
<div class="wrapper">
<flicking ref="flicking0" :options="{ bounce: 30 }" :plugins="plugins">
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg06.jpg" />
</div>
</flicking>
<flicking ref="flicking1" :options="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</flicking>
</div>
</template>
<script>
import { Sync } from "@egjs/flicking-plugins";
export default {
data() {
return {
plugins: []
}
},
mounted() {
this.plugins = [new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: this.$refs.flicking0,
isSlidable: true
},
{
flicking: this.$refs.flicking1,
isClickable: true,
activeClass: "active"
}
]
})];
}
}
</script>
app.component.html
<ngx-flicking #flicking0 [options]="{ bounce: 30 }" [plugins]="plugins">
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg06.jpg" />
</div>
</ngx-flicking>
<ngx-flicking #flicking1 [options]="{ bound: true, bounce: 30, moveType: 'freeScroll' }">
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</ngx-flicking>
app.component.ts
import { Component, OnInit, ViewChild } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Sync } from "@egjs/flicking-plugins";
@Component({})
export class DemoComponent {
@ViewChild("flicking0", { static: true }) flicking0: NgxFlickingComponent;
@ViewChild("flicking1", { static: true }) flicking1: NgxFlickingComponent;
public plugins: Plugin[] = [];
public ngOnInit() {
this.plugins = [new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: this.flicking0,
isSlidable: true
},
{
flicking: this.flicking1,
isClickable: true,
activeClass: "active"
}
]
})]
}
}
export default () => {
const flicking0 = useRef();
const flicking1 = useRef();
const [plugins, setPlugins] = useState([]);
useEffect(() => {
setPlugins([new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: flicking0.current,
isSlidable: true
},
{
flicking: flicking1.current,
isClickable: true,
activeClass: "active"
}
]
})]);
}, []);
return <Flicking ref={flicking0}
className="mb-4"
bounce={30}
plugins={plugins}>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg01.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg02.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg03.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg04.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg05.jpg" />
</div>
<div className="flicking-panel full has-background-primary">
<img className="panel-image" src="/img/demo/bg06.jpg" />
</div>
</Flicking>
<Flicking ref={flicking1}
moveType="freeScroll"
bound={true}
bounce={30}>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg01.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg02.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg03.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg04.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg05.jpg" />
</div>
<div className="flicking-panel thumb has-background-primary">
<img className="thumb-image" src="/img/demo/bg06.jpg" />
</div>
</Flicking>
};
<script>
import { onMount } from "svelte";
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Sync } from "@egjs/flicking-plugins";
import "@egjs/svelte-flicking/dist/flicking.css";
let flicking0;
let flicking1;
let plugins = [];
onMount(() => {
plugins = [new Sync({
type: "index",
synchronizedFlickingOptions: [
{
flicking: flicking0.vanillaFlicking,
isSlidable: true
},
{
flicking: flicking1.vanillaFlicking,
isClickable: true,
activeClass: "active"
}
]
})];
});
</script>
<Flicking bind:this={flicking0} class="mb-4"
options={{ bounce: 30 }}
plugins={plugins}>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg01.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg02.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg03.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg04.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg05.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel full has-background-primary">
<img class="panel-image" src="/img/demo/bg06.jpg" />
</FlickingPanel>
</Flicking>
<Flicking bind:this={flicking1}
options={{ moveType: "freeScroll", bound: true, bounce: 30 }}>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg01.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg02.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg03.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg04.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg05.jpg" />
</FlickingPanel>
<FlickingPanel class="flicking-panel thumb has-background-primary">
<img class="thumb-image" src="/img/demo/bg06.jpg" />
</FlickingPanel>
</Flicking>
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
type | "camera" | "index" | ✔️ | "camera" | Types of methods to synchronize between Flickings. "camera" will sync by camera position, and "index" will sync by panel index |
synchronizedFlickingOptions | Array<{flicking: Flicking, isClickable: boolean, isSlidable: boolean, activeClass: string}> | ✔️ | [] | Detailed options for syncing Flickings |
synchronizedFlickingOptions[].flicking | Flicking | An instance of Flicking to sync | ||
synchronizedFlickingOptions[].isClickable | boolean | ✔️ | false | By enabling this option, clicking the given Flicking's panel will change the given & other Flicking's index |
synchronizedFlickingOptions[].isSlidable | boolean | ✔️ | false | By enabling this option, the given Flicking's scroll with mouse/touch input will change other Flicking's index. Only available for the index type |
synchronizedFlickingOptions[].activeClass | string | ✔️ | An extra class for the panels when selected |
Perspective
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { Perspective } from "@egjs/flicking-plugins";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Perspective({
rotate: 0.5
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Perspective({ rotate: 0.5 })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel is-small"><span className="flicking-index">1</span></div>
<div className="card-panel is-small"><span className="flicking-index">2</span></div>
<div className="card-panel is-small"><span className="flicking-index">3</span></div>
<div className="card-panel is-small"><span className="flicking-index">4</span></div>
<div className="card-panel is-small"><span className="flicking-index">5</span></div>
<div className="card-panel is-small"><span className="flicking-index">6</span></div>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Perspective({ rotate: 0.5 })]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Perspective({ rotate: 0.5 })]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel is-small"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">3</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">4</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">5</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">6</span></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Perspective } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent {
public plugins: Plugin[] = [new Perspective({ rotate: 0.5 })];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Perspective({ rotate: 0.5 })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel is-small"><span className="flicking-index">1</span></div>
<div className="card-panel is-small"><span className="flicking-index">2</span></div>
<div className="card-panel is-small"><span className="flicking-index">3</span></div>
<div className="card-panel is-small"><span className="flicking-index">4</span></div>
<div className="card-panel is-small"><span className="flicking-index">5</span></div>
<div className="card-panel is-small"><span className="flicking-index">6</span></div>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Perspective } from "@egjs/flicking-plugins";
const plugins = [new Perspective({ rotate: 0.5 })];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">3</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">4</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">5</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">6</span></FlickingPanel>
</Flicking>
style
.card-panel {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
box-shadow: 0 0.5em 1em -0.125em rgba(10.2, 10.2, 10.2, 0.1);
max-width: 100%;
font-size: 3rem;
margin: 0.5rem;
width: 50%;
height: 200px;
padding: 30px 20px;
box-sizing: border-box;
overflow: hidden;
}
.is-small {
width: 33%;
}
.flicking-index {
position: relative;
min-width: 60px;
text-align: center;
}
.flicking-index::after {
position: absolute;
content: "PANEL";
font-weight: bold;
left: 0;
bottom: -1.2rem;
width: 100%;
text-align: center;
font-size: 1rem;
}
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
- Svelte
html
<div id="flick" class="flicking-viewport">
<div class="flicking-camera">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</div>
</div>
js
import Flicking from "@egjs/flicking";
import { Perspective } from "@egjs/flicking-plugins";
const flicking = new Flicking("#flick", {
circular: true
});
flicking.addPlugins(new Perspective({
rotate: -1,
scale: 2,
perspective: 600
}));
DemoComponent.jsx
import { Component } from "react";
import Flicking from "@egjs/react-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel is-small"><span className="flicking-index">1</span></div>
<div className="card-panel is-small"><span className="flicking-index">2</span></div>
<div className="card-panel is-small"><span className="flicking-index">3</span></div>
<div className="card-panel is-small"><span className="flicking-index">4</span></div>
<div className="card-panel is-small"><span className="flicking-index">5</span></div>
<div className="card-panel is-small"><span className="flicking-index">6</span></div>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>
script
import Flicking from "@egjs/vue-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Perspective({ rotate: -1, scale: 2, perspective: 600 })]
}
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel is-small"><span class="flicking-index">1</span></div>
<div class="card-panel is-small"><span class="flicking-index">2</span></div>
<div class="card-panel is-small"><span class="flicking-index">3</span></div>
<div class="card-panel is-small"><span class="flicking-index">4</span></div>
<div class="card-panel is-small"><span class="flicking-index">5</span></div>
<div class="card-panel is-small"><span class="flicking-index">6</span></div>
</Flicking>
script
import Flicking from "@egjs/vue3-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default {
components: {
Flicking
},
data() {
return {
plugins: [new Perspective({ rotate: -1, scale: 2, perspective: 600 })]
}
}
}
demo.component.html
<ngx-flicking [options]="{ circular: true }" [plugins]="plugins">
<div flicking-panel class="card-panel is-small"><span class="flicking-index">1</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">2</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">3</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">4</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">5</span></div>
<div flicking-panel class="card-panel is-small"><span class="flicking-index">6</span></div>
</ngx-flicking>
demo.component.ts
import { Component } from "@angular/core";
import Flicking, { Plugin } from "@egjs/ngx-flicking";
import { Perspective } from "@egjs/flicking-plugins";
@Component({
templateUrl: './demo.component.html'
})
export class DemoComponent {
public plugins: Plugin[] = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
}
DemoComponent.jsx
import { Component } from "preact";
import Flicking from "@egjs/preact-flicking";
import { Perspective } from "@egjs/flicking-plugins";
export default class DemoComponent extends Component {
private _plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
public render() {
return <Flicking circular={true} plugins={this._plugins}>
<div className="card-panel is-small"><span className="flicking-index">1</span></div>
<div className="card-panel is-small"><span className="flicking-index">2</span></div>
<div className="card-panel is-small"><span className="flicking-index">3</span></div>
<div className="card-panel is-small"><span className="flicking-index">4</span></div>
<div className="card-panel is-small"><span className="flicking-index">5</span></div>
<div className="card-panel is-small"><span className="flicking-index">6</span></div>
</Flicking>;
}
}
DemoComponent.jsx
<script lang="ts">
import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
import { Perspective } from "@egjs/flicking-plugins";
const plugins = [new Perspective({ rotate: -1, scale: 2, perspective: 600 })];
</script>
<Flicking options={{ circular: true }} plugins={plugins}>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">1</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">2</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">3</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">4</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">5</span></FlickingPanel>
<FlickingPanel class="card-panel is-small"><span class="flicking-index">6</span></FlickingPanel>
</Flicking>
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
selector | string | ✔️ | "" | The selector of the element to which the perspective effect is to be applied. If the selector is blank, it applies to panel element. |
scale | number | ✔️ | 1 | Effect amplication scale. |
rotate | number | ✔️ | 1 | Effect amplication rotate. |
perspective | number | ✔️ | 1000 | The value of perspective CSS property. |