【React】コンテンツをスライドさせて表示したい

はじめに

react-slickを使って自動でスライド送りするような動きを実装してみます

やりかた

yarn add react-slick
yarn add slick-carousel

次に公式に記載されているコードを参考にコンポーネントを実装します。
(この記事では少し変えています。cssは適用していないです。)

コンポーネント

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

import a from '../assets/images/a.jpg';
import b from '../assets/images/b.jpg';
import c from '../assets/images/c.jpg';

function ViewSlide() {
  const settings = {
    dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    speed: 2000,
    autoplaySpeed: 5000,
    cssEase: "linear",
    pauseOnHover: false,
  };
  return (
      <Slider {...settings}>
      <img src= {a} alt="Slide a"></img>
        <img src= {b} alt="Slide b"></img>
        <img src= {c} alt="Slide c"></img>
      </Slider>
  );
}


export default ViewSlide;

react-slickをインストールして実装をすると、以下のエラーが発生しました

プロジェクト配下にreact-slick.d.tsファイルを作成し、ファイルに以下を記載することで解決しました。

declare module 'react-slick';

おわりに

簡単でした！

参考記事