リアクション-リアクションライブラリを使用した画像スライド

スライドショーをSlick Sliderライブラリで実現

1.Slider Libraryのインストール

npm install react-slick --save
npm install slick-carousel --save

2.StaylistSliderコンポーネントからmockデータに渡された画像を読み込む

// Placelist
const Placelist = ({
  placelist: {
    placeImages
  },
}) => {
  return (
    <StyledEngineProvider injectFirst>
      <PlacelistContainer>
        <PlaceImg>
          <StaylistSlider images={placeImages} />
        </PlaceImg>
      </PlacelistContainer>
    </StyledEngineProvider>
  );
};

3.slick sliderのデフォルト設定cssファイルをインポートし、ページでstyled-componsesを使用して実装したいスタイルに適用します。

// StaylistSlider
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const StaylistSlider = ({ images }) => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <StyledSlide {...settings}>
      {images.map((img, index) => (
        <img key={index} src={img} alt="stay slide" />
      ))}
    </StyledSlide>
  );
};


const StyledSlide = styled(Slider)`
  .slick-slide {
    display: inline-block;
  }
  .slick-list {
    width: 300px;
    height: 200px;
    z-index: 100;
    overflow: hidden;
  }

  .slick-prev,
  .slick-next {
    z-index: 9999;
    width: 50px !important;
    opacity: 0;
  }

  .slick-prev {
    left: 5px;
  }
  .slick-next {
    right: 5px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-size: 30px;
  }

  .slick-prev:hover,
  .slick-next:hover {
    opacity: 1;
  }

  .slick-prev:hover:before,
  .slick-next:hover:before {
    color: white;
  }

  .slick-dots {
    z-index: 999;
    position: absolute;
    bottom: 10px;

    li button:before {
      color: white;
    }
  }
`;


export default StaylistSlider;