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 }));
정보
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
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
Options
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
selector | string | ✔️ | "" | Selector of the element to apply parallax effect |
scale | number | ✔️ | 1 | Effect amplication scale |
Fade
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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</FlickingPanel>
<svelte:fragment slot="viewport">
<span class="flicking-arrow-prev"></span>
<span class="flicking-arrow-next"></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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</div>
<div flicking-panel class="card-panel">4</div>
<div flicking-panel class="card-panel">5</div>
<div flicking-panel class="card-panel">6</div>
<div flicking-panel class="card-panel">7</div>
<div flicking-panel class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</FlickingPanel>
<FlickingPanel class="card-panel">4</FlickingPanel>
<FlickingPanel class="card-panel">5</FlickingPanel>
<FlickingPanel class="card-panel">6</FlickingPanel>
<FlickingPanel class="card-panel">7</FlickingPanel>
<FlickingPanel class="card-panel">8</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</div>
<div flicking-panel class="card-panel">4</div>
<div flicking-panel class="card-panel">5</div>
<div flicking-panel class="card-panel">6</div>
<div flicking-panel class="card-panel">7</div>
<div flicking-panel class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</FlickingPanel>
<FlickingPanel class="card-panel">4</FlickingPanel>
<FlickingPanel class="card-panel">5</FlickingPanel>
<FlickingPanel class="card-panel">6</FlickingPanel>
<FlickingPanel class="card-panel">7</FlickingPanel>
<FlickingPanel class="card-panel">8</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</div>
<ViewportSlot>
<div className="flicking-pagination"></div>
</ViewportSlot>
</Flicking>;
}
}
template
<Flicking :options="{ circular: true }" :plugins="plugins">
<div class="card-panel">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div class="card-panel">2</div>
<div class="card-panel">3</div>
<div class="card-panel">4</div>
<div class="card-panel">5</div>
<div class="card-panel">6</div>
<div class="card-panel">7</div>
<div class="card-panel">8</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">1</div>
<div flicking-panel class="card-panel">2</div>
<div flicking-panel class="card-panel">3</div>
<div flicking-panel class="card-panel">4</div>
<div flicking-panel class="card-panel">5</div>
<div flicking-panel class="card-panel">6</div>
<div flicking-panel class="card-panel">7</div>
<div flicking-panel class="card-panel">8</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">1</div>
<div className="card-panel">2</div>
<div className="card-panel">3</div>
<div className="card-panel">4</div>
<div className="card-panel">5</div>
<div className="card-panel">6</div>
<div className="card-panel">7</div>
<div className="card-panel">8</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">1</FlickingPanel>
<FlickingPanel class="card-panel">2</FlickingPanel>
<FlickingPanel class="card-panel">3</FlickingPanel>
<FlickingPanel class="card-panel">4</FlickingPanel>
<FlickingPanel class="card-panel">5</FlickingPanel>
<FlickingPanel class="card-panel">6</FlickingPanel>
<FlickingPanel class="card-panel">7</FlickingPanel>
<FlickingPanel class="card-panel">8</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>