【React】React Slickでスライダーを実装する際にロジックで画像指定を行う

概要

React Slickは、このドキュメントのページにある通り、画像をスライダー形式で表示が行えるライブラリです。ユーザがポインターを選択すると、その画像が表示されます。
今回は、画像の指定をロジックで行うにはどうすればよいかというのをメモ書きします。

対応

こちらのドキュメントページにて記載されている、slickGoToメソッドを使用すれば実現できます。slickGoToを使用するには、sliderのオブジェクトを取得する必要があり、sliderのオブジェクトからメソッドを呼び出す形になります。

実装サンプル

ドキュメントではClass Componentでthisを用いてましたが、Functional Componentでsliderオブジェクトを一度sliderメソッドに入れる実装を記載します。

import React, { useState } from "react";
import { Button } from "react-bootstrap";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function CoordinatePostImageRegisterComponent(prop) {
  const [displayImages, setDisplayImages] = useState(prop.images);
  const [imageSlider, setImageSlider] = useState(undefined);
  // サンプルで最終画像に移動するメソッド
  function setSelectLastImage() {
    imageSlider.slickGoTo(displayImages.length - 1);
  }

  return (
    <>
      <div>
        <Button
          onClick={() => {
            setSelectLastImage();
          }}
        >
          最終画像へ移動
        </Button>
      </div>
　　　　　　　　　　　{/* refからstateにセット */}
      <Slider ref={(slider) => setImageSlider(slider)} {...slideSettings}>
        {displayImages.map((i) => (
          <div>
            <img id={i.key} src={i.url} />
          </div>
        ))}
      </Slider>
    </>
  );
}