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.