React - 리액트 라이브러리를 활용한 이미지 슬라이드 구현

Slick Slider 라이브러리를 이용하여 이미지 슬라이드 구현

1. Slider Library 설치

npm install react-slick --save
npm install slick-carousel --save

2. mock data 로 넘겨받은 images를 StaylistSlider 컴포넌트에서 불러오기

// Placelist
const Placelist = ({
  placelist: {
    placeImages
  },
}) => {
  return (
    <StyledEngineProvider injectFirst>
      <PlacelistContainer>
        <PlaceImg>
          <StaylistSlider images={placeImages} />
        </PlaceImg>
      </PlacelistContainer>
    </StyledEngineProvider>
  );
};

3. slick slider 의 기본 세팅 css 파일을 import 해주고, 페이지 내에서 styled-components를 사용하여내가 구현하고 싶은 스타일에 맞게 적용하기

// StaylistSlider
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const StaylistSlider = ({ images }) => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };
  return (
    <StyledSlide {...settings}>
      {images.map((img, index) => (
        <img key={index} src={img} alt="stay slide" />
      ))}
    </StyledSlide>
  );
};


const StyledSlide = styled(Slider)`
  .slick-slide {
    display: inline-block;
  }
  .slick-list {
    width: 300px;
    height: 200px;
    z-index: 100;
    overflow: hidden;
  }

  .slick-prev,
  .slick-next {
    z-index: 9999;
    width: 50px !important;
    opacity: 0;
  }

  .slick-prev {
    left: 5px;
  }
  .slick-next {
    right: 5px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-size: 30px;
  }

  .slick-prev:hover,
  .slick-next:hover {
    opacity: 1;
  }

  .slick-prev:hover:before,
  .slick-next:hover:before {
    color: white;
  }

  .slick-dots {
    z-index: 999;
    position: absolute;
    bottom: 10px;

    li button:before {
      color: white;
    }
  }
`;


export default StaylistSlider;