Using the Methods

JavaScript

You can call methods directly from the Flicking instance.

const flicking = new Flicking("#el", options);

flicking.next();

React

You can call methods of Flicking by getting a ref of Flicking

import { createRef, Component } from "react";

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

class MyComponent extends Component {

constructor(props) {

super(props);

this.flicking = createRef();

this.panels = [0, 1, 2];

}

render() {

return <Flicking ref={this.flicking}>

{ this.panels.map(idx => <div className="panel" key={idx}>{idx}</div>) }

</Flicking>;

}

async moveToNextPanel() {

try {

await this.flicking.next();

} catch (e) {

console.log(e instanceof FlickingError); // true

console.log(e.code);

}

}

}

See React Refs and the DOM for more info.

Vue@2

You can access instance of Flicking component with the ref property.

<Flicking ref="flicking"></Flicking>

Then call methods of it like

this.$refs.flicking.next();

Vue@3

You can access instance of Flicking component with the ref property.

<Flicking ref="flicking"></Flicking>

Then call methods of it like

this.$refs.flicking.next();

Angular

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with Flicking.

@Component({

selector: 'flicking-parent',

template: `

<button (click)="flick.prev()">Prev</button>

<button (click)="flick.next()">Next</button>

<ngx-flicking #flick></ngx-flicking>

`

})

export class FlickingParent { }

Preact

You can call methods of Flicking by getting a ref of Flicking

import { createRef, render } from "preact";

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

const ref = createRef();

render(<Flicking ref={ref}>{...}</Flicking>, dom);

const flicking = ref.current;

flicking.next();

See React Refs and the DOM for more info.

See all available methods at our API page.