React.js

【React.js】 画像スライダーをいれる

らーめん

React.jsの画像スライダー導入は超シンプル

react-image-galleryいれる

yarn add react-image-gallery
[Github] react-image-gallery

使う

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

const images = [
  {
    original: `${process.env.PUBLIC_URL}/image-1.png`,
    thumbnail: `${process.env.PUBLIC_URL}/image-thumbnail-1.png`,
  },
  {
    original: `${process.env.PUBLIC_URL}/image-2.png`,
    thumbnail: `${process.env.PUBLIC_URL}/image-thumbnail-2.png`,
  },
  {
    original: `${process.env.PUBLIC_URL}/image-3.png`,
    thumbnail: `${process.env.PUBLIC_URL}/image-thumbnail-3.png`,
  },
];

class Slider extends Component {
  render() {
    return (
      <>
        <ImageGallery items={images} />
      </>
    );
  }
}

export default Slider;

images変数にoriginalとthumbnailをキーにした配列を入れて、
importしたImageGalleryコンポーネントにpropsとして渡してる

\ 案件のご依頼・ご相談はこちらから /