最近 React についての記事ばかりですが…今日も React の便利なライブラリのご紹介です。
複数の写真をスワイプで切り替えて表示できる画像ギャラリーを実装したかったので、「react-alice-carousel」というライブラリを使ってみました。
GitHub のページはこちらから。
GitHub – maxmarinich/React responsive component for building content galleries, content rotators and any React carouselsreact-alice-carousel:
https://github.com/maxmarinich/react-alice-carousel
名前に「alice」って入っていてちょっと可愛い。
実装方法は、まずライブラリを下記のコマンドでインストールします。
npm install react-alice-carousel
インストールが完了したら、プロジェクトにインポートして使うだけ！
サンプルコードは下記のとおりです。
import React from 'react';
import AliceCarousel from 'react-alice-carousel'
import 'react-alice-carousel/lib/alice-carousel.css'
const ImageSwipePage = () => (
<AliceCarousel buttonsDisabled={true}>
<img src="[表示したい画像1]" alt="image1" />
<img src="[表示したい画像2]" alt="image2" />
<img src="[表示したい画像3]" alt="image3" />
</AliceCarousel>
);
export default ImageSwipePage;
サンプルなので画像ギャラリーのみを表示しています。
buttonsDisabled={true} を使って、次へ/前へのボタンを非表示にしていますが、それ以外はほとんどデフォルトのままです。
他にも様々な Props が用意されていますが、私はとりあえず上記のみしか使いませんでした。
なお、画像のサイズは自動調節してくれないので、大きい画像を表示しようとすると、そのままオリジナルサイズで表示されて画面からはみ出る場合があります。
そのため、適宜 CSS を使って画像サイズは調節してください。
私は自分で CSS を調整したかったので、自由度が高くてありがたかったのですが、人によっては他のライブラリの方が良いかもしれませんね。
以上、React で画像ギャラリーを実装できるライブラリ「react-alice-carousel」のご紹介でした。
ご参考になれば幸いです。
