React Slickでのスライダー

メソッド

以下はReact Slickが提供するメソッドの一覧です。

インストレーション

以下はReact Slickのインストール手順です。

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

# npmを使用する場合
npm install @types/react-slick --save-dev

# yarnを使用する場合
yarn add @types/react-slick --dev

• CSSのインストール

# npmを使用する場合
npm install slick-carousel --save

# yarnを使用する場合
yarn add slick-carousel

実装

• インポート

  react-slickライブラリと必要なCSSをインポートします。

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

• 基本的な記述方法

  const settings = {
      dots: true,
  };
  
  <Slider {...settings}>
     <img src= '../../..' alt="Slide image1"></img>
     {/* ... */}
     <img src= '../../..' alt="Slide image5"></img>
  </Slider>
  

• 最初にシンプルなSliderを作ってみましょう！

  MainSlider.tsx

  import React,{useState} from 'react';
  import Slider from 'react-slick';
  import 'slick-carousel/slick/slick.css';
  import 'slick-carousel/slick/slick-theme.css';
  import '../styles/mainSlider.css';
  import image00 from '../assets/images/nature00.jpg';
  import image01 from '../assets/images/nature01.jpg';
  import image02 from '../assets/images/nature02.jpg';
  
  const MainSlider = () => {
    const settings = {
      dots: true,
    };
    return (
      <div className = "SliderContainer">
       <h2 className="Title">Welcome to React Slider!</h2>
        <Slider className= "SliderSection" {...settings}>
          <img className= "SlideImage" src= {image00} alt="Slide image1"></img>
          <img className= "SlideImage" src= {image01} alt="Slide image2"></img>
          <img className= "SlideImage" src= {image02} alt="Slide image3"></img>
        </Slider>
       </div>
    );
  };
  
  export default MainSlider;
  

  mainSlider.css

  .SliderContainer{
      width:800px;
      height:560px;
      margin: 20px 10px 0px 50px;
  }
  
  .Title{
      color: #000a80;
      font-size: 32px;
      font-weight: 700;
      text-align: center;
  }
  
  .SliderSection{
      width: inherit;
      height: inherit;
  }
  
  .SlideImage{
      object-fit: cover;
  }
  

  🎬 Watch the Result:

  https://youtu.be/qNkVHS6EQ9g

• スライドプロパティの実装

  今回はスライドプロパティを使って色々実装してみます。

  スライドプロパティの詳細説明は[設定と構成]を参考してください。

  MainSlider.tsx

  import React,{useState} from 'react';
  import Slider from 'react-slick';
  import 'slick-carousel/slick/slick.css';
  import 'slick-carousel/slick/slick-theme.css';
  import '../styles/mainSlider.css';
  import image00 from '../assets/images/nature00.jpg';
  import image01 from '../assets/images/nature01.jpg';
  import image02 from '../assets/images/nature02.jpg';
  
  const MainSlider = () => {
    const [currentImageName, setCurrentImageName] = useState('Mountain');
    const [textColor, setTextColor] = useState('red');
    // スライドが変更された後に実行
    const handleSlideChange = (index: number) => {
      if(index === 0){
        setCurrentImageName('Mountain');
        setTextColor('red');
      }else if(index === 1){
        setCurrentImageName('Garden');
        setTextColor('blue');
      }else if(index === 2){
        setCurrentImageName('Forest');
        setTextColor('green');
      }
    };
  
    const settings = {
      dots: true, // ナビゲーションドットを表示するかどうか
      infinite: true, // スライドを無限にループさせるかどうか
      slidesToShow: 1, // 1回に表示するスライドの数
      slidesToScroll: 1, // 1回にスクロールするスライドの数
      autoplay: true, // 自動再生を有効にするかどうか
      autoplaySpeed: 3500, // 自動再生時のスライド切り替えの速さ（ミリ秒）
      speed: 1000, // スライドのトランジションアニメーションの速さ（ミリ秒）
      pauseOnHover: false, // ホバー時に自動再生を一時停止するかどうか
      afterChange: (index: number) => {
        handleSlideChange(index); // スライドが変更された後に実行されるコールバック関数
      },
    };
  
    return (
      <div className = "SliderContainer">
       <h2 className="Title">Welcome to React Slider!</h2>
        <Slider className= "SliderSection" {...settings}>
          <img className= "SlideImage" src= {image00} alt="Slide image1"></img>
          <img className= "SlideImage" src= {image01} alt="Slide image2"></img>
          <img className= "SlideImage" src= {image02} alt="Slide image3"></img>
        </Slider>
          <p>
            The current slide is{' '}
           <span style={{ color: textColor, fontSize: "24px", fontWeight: 600 }}>{currentImageName}</span>.
          </p>  
        </div>
    );
  };
  
  export default MainSlider;
  

  mainSlider.css

  .SliderContainer{
      width:800px;
      height:560px;
      margin: 20px 10px 0px 50px;
  }
  
  .Title{
      color: #000a80;
      font-size: 32px;
      font-weight: 700;
      text-align: center;
  }
  
  .SliderSection{
      width: inherit;
      height: inherit;
  }
  
  .SlideImage{
      object-fit: cover;
  }
  
  //ドットの色変更の為
  .slick-dots li button:before {
      color: gray;
  }
  

  🎬 Watch the Result:

  https://youtu.be/U72dqGnyL64

• カスタムCSSをドットに適用する方法

  dotsClassについて

  dotsClassは、スライダーのドット（ページングのインジケーター）のためのCSSクラスを指定するためのプロパティです。デフォルトでは'slick-dots'というクラスが使われます。

  もし一部のスタイルを変更したい場合、slick-dotsクラスを直接指定してCSSを追加することも可能です。しかし、slick-dotsのスタイルを一切使用せず、カスタムなスタイルを適用したい場合は、settingsオブジェクトの中にdotsClassプロパティを設定します。

  const settings = {
      ...
      dotsClass: "custom-slick-dots", // ドットのカスタムクラス名
      ...
    };
  

  そして、次のようなCSSを追加します。

  .custom-slick-dots {
      bottom: 60px !important;
      position: absolute;
      display: block;
      width: 100%;
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: center;
  }
  
  .custom-slick-dots li {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 0 5px;
      padding: 0;
      cursor: pointer;
  }
  
  .custom-slick-dots li button{
      font-size: 0;
      line-height: 0;
      display: block;
      width: 20px;
      height: 20px;
      padding: 5px;
      cursor: pointer;
      color: transparent;
      border: 0;
      outline: none;
      background: transparent;
  }
  
  .custom-slick-dots li button:before {
      font-family: 'slick';
      font-size: 6px;
      line-height: 20px;
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      content: '•';
      text-align: center;
      opacity: .25;
      -webkit-font-smoothing: antialiased;
  
      background: #ebeaf0;
      color: #797f94;
      border-radius: 50%;
      transition: 0.3s;
  }
  
  .custom-slick-dots li.slick-active button:before {
      opacity: .75;
      color:green;
  }
  

  🎬 Watch the Result:

  https://youtu.be/hHIRL5z_6S4