React-Slick(슬라이더)

<StyleSlider {...settings}>
  <div>
  	<StyleImg src={Img[0]}></StyleImg>
  </div>
  <div>
      <StyleImg src={Img[1]}></StyleImg>
  </div>
  <div>
      <img src={Img[2]} alt="profile"></img>
  </div>
  <div>
      <img src={Img[3]} alt="profile"></img>
  </div>
  <div>
      <img src={Img[4]} alt="profile"></img>
  </div>
</StyleSlider>

슬라이더 세팅하는 법

  const [activeSlide, setActiveSlide] = useState(0);
  const [activeSlide2, setactiveSlide2] = useState(0);
  const settings = {
    dots: true,
    dotsClass: 'slick-dots',
    infinite: true,
    arrows: false, //화살표 없애기
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,

    beforeChange: (current, next) => setActiveSlide({activeSlide: next}),
    afterChange: (current) => setactiveSlide2({activeSlide2: current}),
    //슬라이더 변경되면 타는 함수
    
  };

css

const StyleSlider = styled(Slider)`
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
    color: #e5e5e5;
  }

  li.slick-active button:hover:before,
  li.slick-active button:focus:before {
    opacity: 1;
    color: black;
  }
  .slick-dots {
    bottom: 16px;
  }
  .slick-dots li button:before {
    opacity: 1;
    color: #e5e5e5;
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #5c5c5c;
  }
`;

전체코드

import React, {useState, useRef} from 'react';
import styled from 'styled-components';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

function AddImgSlider() {
  const fileInput = useRef('');
  const [Img, setImg] = useState([]);

  const settings = {
    dots: true,
    dotsClass: 'slick-dots',
    infinite: true,
    arrows: false,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  //파일선택
  const selectFile = (e) => {
    const {
      target: {files},
    } = e;

    const imageFile = files[0];
    const reader = new FileReader();

    reader.readAsDataURL(imageFile);

    reader.onloadend = (e) => {
      const {
        currentTarget: {result},
      } = e;
      setImg([...Img, result]);
    };
  };
  return (
    <StyleSlider {...settings}>
      <div>
        <StyleImg src={Img[0]}></StyleImg>
      </div>
      <div>
        <StyleImg src={Img[1]}></StyleImg>
      </div>
      <div>
        <img src={Img[2]} alt="profile"></img>
      </div>
      <div>
        <img src={Img[3]} alt="profile"></img>
      </div>
      <div>
        <img src={Img[4]} alt="profile"></img>
      </div>
    </StyleSlider>

    //    <input type="file" onChange={selectFile} ref={fileInput}></input>
  );
}

const StyleSlider = styled(Slider)`
  .slick-dots li button:hover:before,
  .slick-dots li button:focus:before {
    opacity: 1;
    color: #e5e5e5;
  }

  li.slick-active button:hover:before,
  li.slick-active button:focus:before {
    opacity: 1;
    color: black;
  }
  .slick-dots {
    bottom: 16px;
  }
  .slick-dots li button:before {
    opacity: 1;
    color: #e5e5e5;
  }
  .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #5c5c5c;
  }
`;

const StyleImg = styled.div`
  background-image: url('${(props) => props.src}');
  height: 248px;
  background-color: gray;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
`;
export default AddImgSlider;

버그 FIX

웹에서 모바일로 봤을때 dot을 클릭하고 슬라이드 하면 점이 변경이 안됐다.

그래서 공식 깃허브 이슈에 가서 해당 상황을 확인했고 해결도했다.
이슈 확인한 내용: https://github.com/akiran/react-slick/issues/2082

출처
공식문서: https://react-slick.neostack.com/
공식깃허브: https://github.com/akiran/react-slick