slick slide플러그인 사용 시 슬라이드 중앙 고정하는 법

대부분 슬라이드 효과를 구현할 때 자주 찾게되는 js라이브러리중 slick slide가 있다

https://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick을 제작하던 디자인에 녹여내서 사용하던 중 슬라이드의 중앙고정 및 양옆에 슬라이드가 반쯤 보이도록 하고 싶어서 커스터마이징 하던 중 공식문서에서 옵션들을 찾아내서 이곳에 기록합니다(Jquery 기준)

$('슬라이드 돌릴박스 선택자').slick({
    slide: '슬라이드 아이템', // 슬라이드 되어야 할 태그 ex) div, li 
    infinite : false, // 무한 반복 옵션	 
    slidesToShow : 1.1, // 한 화면에 보여질 컨텐츠 개수
    slidesToScroll : 1, // 스크롤 한번에 움직일 컨텐츠 개수
    speed : 1000, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
    arrows : false, // 옆으로 이동하는 화살표 표시 여부
    prevArrow : $('.prev_arrow'), // 이전 화살표 클래스명
    nextArrow: $('.next_arrow'), // 다음 화살표 클래스명
    dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
    autoplay : true, // 자동 스크롤 사용 여부
    autoplaySpeed : 5000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
    pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
    vertical : false, // 세로 방향 슬라이드 옵션
    dotsClass : "slick-dots", // 아래 나오는 페이지네이션(점) css class 지정
    swipe : true, // 드래그 가능 여부 
    centerMode: false, // 슬라이드 중앙이동(slidesToShow가 홀수여야함)
    variableWidth: false // 가변폭 슬라이드(각 박스크기 다르게 설정)
 });

위에 centerMode를 true로 중앙에 고정했는데 좌우 여백을 조절하고 싶다면 slick에서 자동생성되는 draggable클래스에 padding-inline값을 조절하면 된다