Listening to Events
- JavaScript
- React
- Vue@2
- Vue@3
- Angular
- Preact
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);
})
All events are prefixed with on-
, and camelCase
d.
import Flicking, { MoveEvent, NeedPanelEvent } from "@egjs/react-flicking";
<Flicking
onMove={(e: MoveEvent) => {
console.log(e);
}}
onNeedPanel={(e: NeedPanelEvent) => {
console.log(e);
}}
>
{...}
</Flicking>
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>
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>
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>
All events are prefixed with on-
, and camelCase
d.
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.