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.

Svelte

You can use bind:this syntax of svelte to get the reference of Flicking.

<script lang="ts">
  import Flicking, { FlickingPanel } from "@egjs/svelte-flicking";
  import "@egjs/svelte-flicking/dist/flicking.css";

  let flicking: Flicking;
</script>

<Flicking bind:this={flicking}>
  <!-- Those will render "div" element -->
  <FlickingPanel>0</FlickingPanel>
  <FlickingPanel>1</FlickingPanel>
  <FlickingPanel>2</FlickingPanel>
</Flicking>
<button on:click{() => { flicking.next(); }} />

See all available methods at our API page.