2022/04/02 React Slick 슬라이더

https://react-slick.neostack.com/docs/get-started

Neostack

import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";

import할 때 ~빼면 작동한다.

내가 쓴 세팅 예제는 다음과 같고 세팅 파일을 export, import하는 식으로 컴포넌트에 적용했다.

export const settings = {
  infinite: false,
  arrows: true,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 820,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
      breakpoint: 540,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
};

 

화살표 색깔이 default가 투명인지 흰색인지, 흰 배경에 쓰면 화살표가 보이지 않는다.

이럴 때는 상위 css에서 다음과 같이 설정해준다. 지금 프로젝트의 경우 그냥 App.css에서 다음과 같이 설정해주었다.

.slick-prev:before,
.slick-next:before {
  color: black !important;
}

화살표가 잘 보이는군 후훗

 

참고자료

https://stackoverflow.com/questions/28998536/slick-slider-next-arrows-not-showing

Slick Slider Next Arrows not showing