[React] 12. react-slickの使用

今回新しいプロジェクトを行うときはcarouselを実現します!幸いなことに、react-slickを通じて、ホイールを簡単に実施することができます.
次のリンクでは、使用方法をより詳細に説明できます.
react-slick公式ドキュメント

💚 react-slickインストール

react-slickを使用するとcarouselをより簡単に実現できます!使用する前にインストールする必要があります.

npm install react-slcik --save

インストールが完了したら、cssを適用するためにcssを追加する必要があります.
indexファイルに次の内容を追加して使用します.

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />

インストール後、インポートして使用できます!

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

💛 react-slickの適用

以下のような映画をお勧めする機能を実現するために使用しています.

settingsを作成し、次の設定を行います.応答を追加し、画面サイズに合わせて表示内容の数を設定できます.

const settings = {
  dots: false,
  infinite: true,
  speed: 300,
  autoplay: true,
  slidesToShow: 6,
  slidesToScroll: 6,

  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true,
      },
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        initialSlide: 2,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
};