React TypeScriptで自動横スクロールするスライダーの作成方法（react-slick）

目次

事前準備

スライダーに表示したい任意の画像を３種類用意して、「img.png」「img1.png」「img2.png」として、ソースコードと同じディレクトリに格納する。

ライブラリインストール

以下のコマンドを実行して、各種ライブラリをインストールする。

npm i --save-dev @types/react-slick
npm install slick-carousel

ソースコード

ソースコードの全量は以下です。
「sliderSettings」にて、スライダーの各種パラメータの調整が可能です。

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

import imgSample from "./img.png";
import imgSample1 from "./img1.png";
import imgSample2 from "./img2.png";

const sliderSettings = {
  autoplay: true, // スライドを自動再生
  autoplaySpeed: 4500,
  infinite: true, // コンテンツループ
  arrows: false, // 「前」「次」のスライドを操作する矢印を非表示
  cssEase: "linear",
  speed: 500, // スライドアニメーションのスピード
  variableWidth: true,
};

const carouselItems = [
  { image: imgSample, alt: "" },
  { image: imgSample1, alt: "" },
  { image: imgSample2, alt: "" },
];
const SliderSample = () => {
  return (
    <div>
      <Slider {...sliderSettings}>
        {carouselItems.map((carouselItem, index) => (
          <div key={index}>
            <img
              src={carouselItem.image}
              alt={carouselItem.alt}
              width="300px"
            />
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default SliderSample;