- React Image Galleryを使いこなそう！
React Image Galleryを使いこなそう！
- 最終更新日： 2024年9月12日（木）
- 公開日： 2024年9月11日（水）
こんにちは。
今回は、React Image GalleryというReactライブラリを活用し、簡単なスライドショーを作成してみたいと思います。
公式: https://www.npmjs.com/package/react-image-gallery/v/0.5.11?activeTab=readme
react-image-galleryとは
画像のスライドショーを作成するための高機能なReactのライブラリです。同様の機能を有するReactライブラリとしてSlickやSwiperも挙げられますが、今回はそれらと同等に便利なReact Image Galleryをご紹介します。
出典: https://github.com/xiaolin/react-image-gallery
プロジェクトのセットアップ
まずはターミナルにて下記コードを打ちます。今回はimage-gallery-sampleという名前でReactアプリケーションを作成します。
npx create-react-app image-gallery-sample
cd image-gallery-sample
必要なパッケージのインストール
次に今回のメインとなる’react-image-gallery’をインストールします。
npm install react-image-galleryサンプルコードの作成
上記でアプリケーションは作成されたはずなので、’src/App.js’のファイル内容を全て消して下記のように編集してみてください。
import React from 'react';
import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';
function App() {
const images = [
{
original: 'https://via.placeholder.com/600x400.png?text=Image+1',
thumbnail: 'https://via.placeholder.com/150x100.png?text=Thumb+1',
description: 'This is the first image',
},
{
original: 'https://via.placeholder.com/600x400.png?text=Image+2',
thumbnail: 'https://via.placeholder.com/150x100.png?text=Thumb+2',
description: 'This is the second image',
},
{
original: 'https://via.placeholder.com/600x400.png?text=Image+3',
thumbnail: 'https://via.placeholder.com/150x100.png?text=Thumb+3',
description: 'This is the third image',
},
];
return (
<div className="App">
<h1>Image Gallery Sample</h1>
<ImageGallery
items={images}
showPlayButton={true} // プレイボタンを表示
showFullscreenButton={true} // フルスクリーンボタンを表示
showThumbnails={true} // サムネイルを表示
showBullets={true} // インジケーター（ドット）を表示
slideInterval={5000} // スライドショーの間隔（ミリ秒）
autoPlay={true} // 自動再生を有効にする
infinite={true} // ループを有効にする
showNav={true} // ナビゲーション矢印を表示
additionalClass="custom-gallery" // カスタムクラスを追加
/>
</div>
);
}
export default App;
.custom-gallery .image-gallery-slide img {
border-radius: 10px;
}
.custom-gallery .image-gallery-thumbnail {
border: 2px solid #ccc;
}
解説
短いコードですが、ポイントとしては下記を忘れないことです。
import 'react-image-gallery/styles/css/image-gallery.css';こちらをインポートすることにより、ライブラリに同梱されているCSSを適用することができます。
プレイボタンやフルスクリーンボタンの表示、自動再生を有効にする機能など様々なものがあります。（ちなみに不要なものはtrueの部分をfalseに変えるとOFFにできます。）
コードの画像はサンプルなので、お好みの画像を入れてみてください。
CSSでスタイルをあてると、よりオシャレに見えます！
アプリケーション起動方法
下記コマンドを実行するとReactのアプリケーションが起動します。
npm startブラウザにて「http://localhost:3000/」を入力してみましょう。画像ギャラリーができているはずです。
まとめ
本ライブラリの他にもReactには多くのライブラリがあり、見ているだけでも楽しくなります。まずはポートフォリオ等に活用してみてはいかがでしょうか？
さいごに
現在デザイン・システム室では、新しいメンバーを募集しています。少しでも興味を持たれた方は、ぜひご応募ください✨💻
皆様からのご応募、心よりお待ちしております。