slick を React に移植する方法

slick を React に移植する方法

link です。

Web ページ上でスライダーを作成できる slick というプラグインがあります。

便利ですが、 React でスクリプトとしてそのまま導入しようとするとエラーで正常に動作しません。

今回は React 上で slick と同じことをそのままできる React Slick というパッケージを紹介します。

React Slick とは

jQuery のプラグインである slick を React でも使用できるようモジュール化したものになります。

slick のオプションをそのまま引き継いでいるため、スライダーの設定がそのまま React に引き継げます。

導入と動作確認

導入は npm で React プロジェクトにインストールするだけです。

React Slick導入
$ npm install react-slick

以下のコード例のように <Slider> を使ってその中に各種オプションを設定するだけでスライダーが作れます。

スライダーの一例
import Slider from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

function App() {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  }
  
  return (
    <div>
      <Slider {...settings}>
        <div><img src={img1} alt='img1' /></div>
        <div><img src={img2} alt='img2' /></div>
        <div><img src={img3} alt='img3' /></div>
      </Slider>
    </div>
  );
}

スライダー例

スライダー例

機能紹介

主なオプションを以下の表に紹介します。

オプション 説明
autoplay スライドを自動再生します。
infinite コンテンツをループさせます。(例 : ① -> ② -> ③ -> ① …)
initialSlide 最初に表示するスライドを指定します。
lazyLoad 画像の読み込むタイミングを指定します。
progressive は最初にまとめて、 ondemand は遅延読み込みをします。
slidesToScroll 一度にスライドを何枚スクロールするか指定します。
slidesToShow フレーム内にスライドを何枚表示するかを指定します。
speed スクロール、フェードアニメーションの速度をミリ秒で指定します。
pauseOnHover autoplaytrue の場合に自動再生をマウスホバーで一時停止します。
arrows 「前」「次」のスライドを操作する矢印を表示します。
centerMode 現在表示しているスライドを中央に配置し、次のスライドを少し見切れて表示させます。
centerPadding centerMode を指定した場合に見切れて表示をさせる割合を指定します。
customPaging dotstrue の場合ドットナビをカスタムできます。
dots ドットナビを表示します。
fade スライドの切り替え方をフェードにします・
nextArrow arrowstrue の場合に「次」の矢印の見た目を HTML でカスタムできます。
prevArrow arrowstrue の場合に「前」の矢印の見た目を HTML でカスタムできます。

参考サイト

まとめ

今回は slick を React に移植する方法を紹介しました。

React でお手軽にスライダーを実装できるのでぜひ活用してみてください。

それではまた、別の記事でお会いしましょう。

linkohta