Call next on Flicking Carousel in React

user_142363 0
Viewed 432

I'm attempting to add in buttons that go forwards and back with this package: https://www.npmjs.com/package/@egjs/react-flicking. Everything works great but I also want to add in forward and back arrows and am scratching my head trying to understand how I can pass next to the instance. Their documentation is vanilla so it's definitely my lack of react experience causing this issue... Thanks!

import Flicking from "@egjs/react-flicking";

<div>
  <Flicking
    onMoveStart={(e) => handleMoveStart(e)}
    onChange={(e) => handleChange(e)}
   >
    {props.slides.map((slide, i) => (
      <Slide
        className={i === 0 ? 'current' : ''}
        key={i}
      >
        <Card slide={slide} />
      </Slide>
    ))}
  </Flicking>
  <button onClick={handleNext}>Next</button> // should call next when clicked and advance <Flicking>
</div>
carousel reactjs
1 Answers

You can look this example: https://codesandbox.io/s/react-flicking-examples-xboxz?file=/src/DotIndicator.tsx:0-377

import * as React from "react";
import Flicking from "@egjs/react-flicking";
import DotIndicator from "./DotIndicator";

export default class Method extends React.Component<
  {},
  { data: number[]; selected: number }
> {
  private flicking: React.RefObject<Flicking>;

  constructor(props) {
    super(props);
    this.flicking = React.createRef<Flicking>();
    this.state = {
      data: [0, 1, 2, 3, 4],
      selected: 0
    };
  }

  public render() {
    return (
      <div className="container">
        <button onClick={this.onClickLeft}>Left</button>
        <Flicking
          className="flicking"
          ref={this.flicking}
          onMoveEnd={e => {
            this.setState({ selected: e.index });
          }}
        >
          {this.state.data.map(index => (
            <div className="panel" key={index}>
              <div className="anchor" />
            </div>
          ))}
        </Flicking>
        <DotIndicator list={this.state.data} selected={this.state.selected} />
        <button onClick={this.onClickRight}>Right</button>
      </div>
    );
  }

  public onClickLeft = () => {
    this.flicking.current.prev();
  };

  public onClickRight = () => {
    this.flicking.current.next();
  };
}
user_60726410
Related