[React] React Slickライブラリを使用して画像スライドを実装する

画像をマウスでスライドできるようにするために、React Slickライブラリを使用して簡単かつ迅速にスライドを実装してみました。

⚒️ React Slick インストールする

npm i react-slick

CSS 修正用インストールコード（オプション）

npm i slick-carousel

⚙️ ライブラリをインポートする

Sliderを自動補完で入力すると、< import Slider from react-slick; >のように表示される。

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

👨‍💻 Slider 作成する

スライドさせたい画像はSliderタグの中に入れればいい。

🌠 Slider スタイルを適用する

settings 中に書けばいい！

デザインは以下のサイトを参考に
https://react-slick.neostack.com/docs/example/simple-slider

import React from "react";
import Slider from "react-slick";

export default function SimpleSlider() {
  
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  
  return (
    <Slider {...settings}>
      <div>
        <h3>1</h3>
      </div>
      <div>
        <h3>2</h3>
      </div>
      <div>
        <h3>3</h3>
      </div>
      <div>
        <h3>4</h3>
      </div>
      <div>
        <h3>5</h3>
      </div>
      <div>
        <h3>6</h3>
      </div>
    </Slider>
  );
}

参考コード

参考になるかどうかわからないが…私はこのように活用した。まだ写真や設定内容は変更される予定だが、このように使うという参考にしてもらえれば嬉しい

    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrow: true,
      };
    
      useEffect(()=>{
        switch(project){
            case 1 : setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )
                break;
            case 2 : setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )
                break;
            case 3 :  setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )

                break;
            case 4 :  setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )
                break;
            case 5 :  setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )
                break;
            case 6 : setImages(
                [
                    './images/bookshop1.jpg',
                    './images/bookshop2.jpg',
                    './images/bookshop3.jpg',
                    './images/bookshop4.jpg',
                    './images/bookshop5.jpg',
                    './images/bookshop6.jpg'
                ]
            )
            
        }
    },[setImages,project])


    return(
        <div className="image-grid">
            {
                videos? 
                <video className="videoTag" controls autoPlay loop>
                {/* <source src={intro.video} type="video/mp4" /> */}
                このブラウザは動画再生に対応していません。
                </video>
                :
                <Slider {...settings}>
                    {
                        images.map((img,i)=>{
                            return(
                                <div className="sliderimg" key={i}>
                                <img src={img} alt={`project-${project}-image-${i}`} />
                              </div>
                            )
                        })
                    }
                </Slider>
            }
  
  
        </div>
    )
}

export default ImageModal;