[plugin] slick.js slide 컨텐츠 너비로 설정하기

slidesToShow를 설정한 후 캡처본 처럼 두 줄이상으로 넘어가는 경우

slidesToShow 설정 후에 슬라이드 너비가 셋팅되어있기 때문에, 캡처본 처럼 두 줄이상으로 보일 경우가 있다.

그럴 경우에는 slick.js의 옵션인 variableWidth값을 셋팅 해주면 된다.

 

아래는 해당 옵션 추가 예시이다.

let slidetNavIdSetting = {
    variableWidth: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    swipe: false,
    infinite: false,
    asNavFor: sliderId,
    dots: false,
    centerMode: false,
    focusOnSelect: true,
  }

  $(sliderNavId).each(function(index, val){
    if($(val).find('.menu-item').length === 2){
      slidetNavIdSetting.slidesToShow = 2
    }
    if($(val).find('.menu-item').length === 3){
      slidetNavIdSetting.slidesToShow = 3
      // $('.card-menu-slick .menu-item').css({ padding: '6px 3px' });
    }
    $(sliderNavId).slick( slidetNavIdSetting );
  });

variableWidth: true

부분만 참고하면 될 것 같다.

😊