【Laravelプロジェクト】react-image-galleryを導入

技術構成

いい感じなフォトギャラリーないのか

HP作成を行っているとスライダーの要望が度々出てくるはずです。

かくいう僕も今回、そういった要望があってスライダーを導入しなければいけない状態でした。

一度、jQueryで生実装したことがあるのですが、なんやかんや面倒くさい思いをした苦い経験があったので、今回は生実装を避けたいという思いからReact でいい感じなライブラリないのか調べたところ「react-image-gallery」に出会いました。

天下のReact 様は流石だなと言う感じです。

react-image-gallery以外の選択肢としては以下のようなものが挙げられます。

実際に導入

npm でインストール。

npm install react-image-gallery

インポート

import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

※2行目のcss もインポートしてください。
　css もインポートすることで梱包されているスタイルを当てることが可能です。

上記の設定で使う準備が完了です。

あとは自由に設定していくだけです。

今回はLaravel からデータを渡すため、コントローラーから配列を渡します。（本当はModel でデータ定義して渡すべきですが、）

$images = [
            [
                "original" => "/img/AsItFlows/asit_team.jpg",
                "thumbnail" => "/img/AsItFlows/asit_team.jpg",
                "originalAlt" => "チーム",
                "thumbnailAlt" => "チーム",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            [
                "original" => "/img/AsItFlows/sunset.jpg",
                "thumbnail" => "/img/AsItFlows/sunset.jpg",
                "originalAlt" => "サンセット",
                "thumbnailAlt" => "サンセット",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            [
                "original" => "/img/AsItFlows/surf_member.jpg",
                "thumbnail" => "/img/AsItFlows/surf_member.jpg",
                "originalAlt" => "メンバー",
                "thumbnailAlt" => "メンバー",
                "onErrorImageURL" => "/img/AsItFlows/logo.jpg",
            ],
            ...
        ];
        shuffle($images);
        return Inertia::render('Public/AsItFlows/Top', [
            'items' => $images
        ]);

最後にjsx 側でいい感じに使用します。

<ImageGallery items={items}
  showNav={true}
  autoPlay={true}
  showFullscreenButton={false}
  useBrowserFullscreen={false}
  showPlayButton={false}
/>

んー。素敵。