carousel 만들기

What to do?

• react-slick이라는 라이브러리를 이용해서 간단하게(?) carousel(캐러셀)을 구현해보자.
• 우선 react-slick을 설치하자. 

yarn add react-slick

• 그리고 react-slick에 기본적인 디자인을 입혀줄 slick-carousel을 설치하자.

yarn add slick-carousel

 

• react-slick과 slick-carousel만 이용하면 디자인이 별로?라서 조금의 커스텀을 해주었다.
• 위 두 라이브러리를 설치한 후 개발자도구를 열어서 태그의 classname을 확인하면서 누구든 css를 수정하면서 커스텀할 수 있다.

사용법

Slider 컴포넌트

• 우선 react-slick의 Slider 컴포넌트와 기본적으로 slide될 아이템들을 하나씩만 보이게 해주고 dots등을 미리 디자인해 준 slick-carousel의 css 파일들을 임포트하자.
  • slick-carousel을 임포트하지 않으면 답도없이 커스텀을 많이 해야한다..
  • dots도 이상하게 생긴건 둘째 치고 기본적으로 이미지들이 한번에 다보인다;
• react-slick의 Slider 컴포넌트 아래 슬라이드하여 보여줄 아이템들을 넣고 settings에 옵션들을 작성해주자.
  • .className: Slider의 css 스타일
  • inifinite: 마지막까지 slide 했다가 다음으로 넘기면 처음으로 돌아오기
  • speed: slide되는 속도
  • slideToShow: 하나의 슬라이드에 표시되는 아이템 갯수
  • dots: slide 상황 표시. 기본적으로 Slider 아래에 나타난다.
  • arrows: 다음이나 이전으로 돌리는 화살표. 사용하지 않을 것이므로 false로 처리

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

const App = () => {
  const settings = {
    className: "slider-items",
    infinite: true,
    speed: 500,
    slideToShow: 1,
    dots: true,
    arrows: false
  }
  return (
    <div className="slider-wrapper">
      <Slider {...settings}>
        <div className="slider-item">
          <div className="slider-item-gradient"></div>
          <img src="/img/뚱이1.jpg"/>
        </div>
        <div className="slider-item">
          <div className="slider-item-gradient"></div>
          <img src="/img/할라1.jpg"/>
        </div>
        <div className="slider-item">
          <div className="slider-item-gradient"></div>
          <img src="/img/할라2.jpg"/>

        </div>
          <div className="slider-item-gradient"></div>
          <img src="/img/뚱이2.png"/>
      </Slider>
    </div>
  );
}

export default App;

CSS 커스텀

• react slick의 dots는 slick-dots라는 이름의 class로 접근할 수 있다.
  • 개발자 도구 열어서 확인 가능!
• dots의 버튼이 기본적으로 검은색이지만 흰색으로 커스텀하고 dots에 해당하는 이미지가 보여지는 상태라면 폰트 사이즈를 약간 키웠다.
  • slick-dots 아래 있는 li 중 선택된 것은 li.slick-active 아래의 button:before로 접근 할 수 있다.
  • 선택되지 않은 것은 slick-dots 아래 li아래의 button:before 로 접근할 수 있다.
  • opacity는 기본적으로 적용되어 있기 때문에 따로 건들지 않음!
• slick-dots의 위치가 기본적으로 bottom: -25px이기 때문에 Slider 내에 보여주기 위해 적절히 bottom 값을 수정했다.
• 또한 slick-dots의 버튼들을 흰색으로 커스텀했기 때문에 흰색 이미지가 들오면 dots가 보이지 않기 때문에 slider 내에 gradient를 담당하는 div 태그를 하나 만들어서 위쪽이 검은색으로 보이게 만들어서 dots가 무조건 보이게 만듬!

.slider-wrapper {
  padding: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-items {
  width: 300px;
  height: 600px;
  position: relative;
}

.slider-item {
  position: relative;
  width: 300px;
  height: 600px;
  outline: none;
  border-radius: 15px;
  background: black;
  overflow: hidden;
}

.slider-item-gradient {
  position: absolute;
  height: 100%;
  width: 100%;
  background: linear-gradient(to top, rgba(186, 186, 186, 0) 7.14%, rgba(0, 0, 0, 0.15) 85.49%);
}

.slider-item img {
  width: 100%;
  height: 100%;
}

.slick-dots {
  bottom: 550px;
}

.slick-dots li.slick-active button:before {
  color: white;
  font-size: 12px;
}

.slick-dots li button:before {
  color: white;
}

 

+++ 꿀팁

• Slider에 afterChange prop으로 slide되고 난 후의 인덱스를 알 수 있다!

<Slider {...settings} afterChange={(index) => console.log(index)}>