slick slider styling

react-slick.neostack.com/

Neostack

 

사용할때마다 슬라이더의 이미지들의 사이즈를 화면너비와 정해진 높이에 맞추어야 할때, 

메인 배너같은 경우, custom styling 에 대해 혼란스러울 경우가 있어 메모해둔다. 

( 매번 이미지를 감싸는 다른 요소의 사이즈를 변경하는 것에 초점을 두다가 시간을 낭비하는 경우가 많다. )

 

간단한 방법은( 내가 해본 결과 )

- 기본 스타일링을 적용하고 

- 슬라이더의 기본 너비 수정

- 거기에서 슬라이더 이미지의 width, height 값과 사이즈를 설정하면 된다. 

- 그외 UI 요소들 수정

 

예를 든다면 다음과 같다. 

.slick-slider{  
  width: 100%;
  background-color: #e9ecef;
}
.slick-slide{
  img{
    object-fit: cover;
    width: 100%;
    height: 500px;
  }
}
.slick-dots{
  bottom:5px;

  li button:before{
    font-size: 15px;
    color: white;   
  }
  li.slick-active button:before {
    opacity: .75;
    color: white;
}