Listening to Events

JavaScript

You can listen to Flicking's events with Flicking#on

// If you're using a package manager

import { EVENTS } from "@egjs/flicking";

// Or, if you're using a CDN

const EVENTS = Flicking.EVENTS;

flicking.on(EVENTS.MOVE, evt => {

console.log(evt);

})

React

All events are prefixed with on-, and camelCased.

import Flicking, { MoveEvent, NeedPanelEvent } from "@egjs/react-flicking";

<Flicking

onMove={(e: MoveEvent) => {

console.log(e);

}}

onNeedPanel={(e: NeedPanelEvent) => {

console.log(e);

}}

>

{...}

</Flicking>

Vue@2

All event names are renamed to kebab-case, following the Vue event naming convention.

<Flicking

@ready="e => { ... }"

@move-end="e => { ... }"

v-on:need-panel="e => { ... }"

>

{{ ... }}

</Flicking>

Vue@3

All event names are renamed to kebab-case, following the Vue event naming convention.

<Flicking

@ready="e => { ... }"

@move-end="e => { ... }"

v-on:need-panel="e => { ... }"

>

{{ ... }}

</Flicking>

Angular

You can listen events of the ngx-flicking using Angular's event binding.

<ngx-flicking

[options]="{ needPanelThreshold: 50, renderOnlyVisible: true }"

(needPanel)="onNeedPanel($event)">

{{ ... }}

</ngx-flicking>

Preact

All events are prefixed with on-, and camelCased.

import Flicking, { MoveEvent, NeedPanelEvent } from "@egjs/preact-flicking";

<Flicking

onMove={(e: MoveEvent) => {

console.log(e);

}}

onNeedPanel={(e: NeedPanelEvent) => {

console.log(e);

}}

>

{...}

</Flicking>

Svelte

You can use on:eventName syntax to listen Flicking events.
All event properties are available in the event's detail property.

<script lang="ts">

import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";

import "@egjs/svelte-flicking/dist/flicking.css";

</script>

<Flicking on:ready={e => {

console.log("READY!");

}} on:move={e => {

// Event properties are placed in "detail"

console.log(e.detail);

}}>

<!-- Those will render "div" element -->

<FlickingPanel>0</FlickingPanel>

<FlickingPanel>1</FlickingPanel>

<FlickingPanel>2</FlickingPanel>

</Flicking>

See all available events at Flicking#events.