[React] 12. react-slickの使用

6952 ワード
React テキストリンク
今回新しいプロジェクトを行うときは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,
      },
    },
  ],
};
2021. 05. 04(火)TIL
Python :モジュールとパッケージ