react-slick

react-slick

簡単にスライダー作れるアプリ
コンポーネントを並べるだけでスライダー作れる
細かいところで躓いたがトータルではそこまで難しく無かった

パッケージのインストール

yarn add react-slick
yarn add slick-carousel

各import

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

setting
スライドの設定

const settings = {
    dots: true,
    infinite: true,
    speed: 500,
  };

スライドの設定はこの記事見るとよろし

return(
    <SliderWrapper>
       <Slider {...settings}>
          <div>
            <h1>1</h1>
          </div>
          <div>
            <h2>2</h2>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h4>4</h4>
          </div>
          <div>
            <h5>5</h5>
          </div>
          <div>
            <h3>6</h3>
          </div>
       </Slider>
    </SliderWrapper>
)

基本はこれだけで作れる
構造自体は簡単だったが別の所で躓いた。

詰まった所
CSSloader入って無くてcssファイルのimportが出来てなかった
cssなんか勝手に読み取ってくれるだろうって思ってた