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>

See all available events at Flicking#events.