react-slick 이용하기

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

Neostack

 

좌우로 슬라이드 하는 페이지를 구현하고 싶어서 찾아보다가 디자이너분께 받은 작업물이 가운데 요소를 강조하는 형태라 centerMode가 있는 react-slick을 이용하게 되었다.

 

근데 뭐가 뭐가 문젠건지 1번째를 원했는데 2번째처럼 떴다. 기존에 있던 css들과 충돌이 난건지 뭔지 도저히 모르겠음..

 

버튼은 화면 사이즈에 밀려서 밖으로 나간거라 사이즈 조정하니까 나오던데 centerMode도 안되고 억지로

.slick-slide{} 찾아서 css로 margin 줘서 카드형으로 만듦 

라이브러리 가져다 쓰는 것도 어렵다 .... 무엇이 문제였을까요...

 

이유는 모르겠으나 해결...

 

기존 방법 :

npm install react-slick --save

라이브러리 다운 받아서 import 로 했음.. 

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

 

 

 

수정 방법: bit.dev/akiran/react-slick/slider?example=5cc70767c7e7de0015a7db87

slider - react-slick · Bit

<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
   

 js 파일에 위 코드 추가하고 

 

css 파일로 수정.. 

.container {
  margin: 0 auto;
  padding: 0px 40px 40px 40px;
  width: 400px;
}
h3 {
    background: #5f9ea0;
    color: #fff;
    font-size: 36px;
    line-height: 100px;
    margin: 10px;
    padding: 2%;
    position: relative;
    text-align: center;
}
.slick-next:before, .slick-prev:before {
    color: #000;
}
.center .slick-center h3 {
    color: #e67e22;
    opacity: 1;
    -ms-transform: scale(1.08);
    transform: scale(1.08);
}
.center h3 {
    transition: all .3s ease;
}