slick slider 용어 정리

다운로드

yarn add react-slick
yarn add -D slick-carousel

 

import

@import '~slick-carousel/slick/slick.css';
@import '~slick-carousel/slick/slick-theme.css';

 

styled-components 사용시

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

row : 1	이미지를 몇 줄로 나타낼건지
dots : true  /  false	네비게이션 버튼을 나타낼건지  { default : false }
appendDots : $(' #dots ')	네비게이션 버튼 변경
dotsClass : 'custom-dots'	네비게이션버튼 클래스 변경  { default : true }
infinite  : true  /  false	무한반복  { default : true }
slidesToShow : 2	한번에 보여줄 사진 갯수
slidesToScroll : 3	한번에 넘길 사진의 갯수
slidesPerRow : 1	보여질 행의 수 ( 한줄 , 두줄, 세줄 ... )
autoplay : true  /  false	자동으로 넘기기  { default : false }
autoplaySpeed : 2000	자동 넘기기 시간조정   ( ex : 1000ms = 1초 )
variableWidth : true  /  false	사진마다 width의 크기 차이의 여부    { default : false }
draggable: true /  false	리스트 드래그 가능 여부    { default : true }
arrows : true /  false	좌우 넘기기 화살표 사용 여부  { default : true }
pauseOnFocus : true  /  false	마우스 포커스 시 슬라이드 멈춤  { default : true }
pauseOnHover : true /  false	마우스 호버 시 슬라이드 멈춤    { default : true }
pauseOnDotsHover : true /  false	네비게이션 버튼(dots) 호버 시 슬라이드 멈춤  { default : false}
vertical : true /  false	세로방향 여부    { default : false }
verticalSwiping : true /  false	세로방향 스와이프 여부    { default : false}
accessibility : true /  false	접근성 여부  { default : true }
appendArrows : ${ ' #arrows ' }	좌우 화살표 변경 { 선택자 혹은  ${ element } }
preArrow : ${ '#preArrow' }	좌(이전) 화살표 변경  { 선택자 혹은  ${ element } }
nextArrow : ${ '#nextArrow' }	우(다음) 화살표 변경  { 선택자 혹은  ${ element } }
initialSlide : 1	처음 보여지는 슬라이드 번호    { default : 0 }
centerMode: true  /  false	중앙에 슬라이드가 보여지는 모드  { default : false }
centerPadding : ' 50px '	중앙에 슬라이드가 보여지는 모드에 padding 값
fade : true	모션 사용 여부   { default : false }
speed : 2000	모션 시간  (넘어가는 시간)  ( ex : 1000ms = 1초 )
waitForAnimate : true  /  false	애니메이션 중에는 동작을 제한  {  default : true }
responsive : [ {                         breakpoint :  1024,     ( breakpoint : 반응형 구간 )                         settings : {                   ( settings : 반응형 구간에 따른 설정 변경 )                                             slidesToShow : 3,                                           slidesToScroll : 3                                           fade : true                                           speed : 2000 } } ]

 

const settings = {

 

dots: true, // 슬라이드 아래 점 표시

 infinite: true, // 무한 슬라이드

speed: 2000, // 슬라이드 속도

slidesToShow: 4, // 4개씩 보여줌

slidesToScroll: 1, // 한번에 하나의 슬라이드만 넘김

arrows: true, // 좌우 화살표

autoplay: true, // 자동으로 넘기기

autoplaySpeed: 3000, // 자동넘기기 시간조정

 

}

 

 

 

필요한곳에 상위로 묶어주기

<Slider {...settings}>

{~~~.map(() => 

<div>

<Card />

</div>

)}

</Slider>