CSS <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

JS <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

+[code]

$('.slider-items').slick({

  rows: 1,                    //이미지를 몇 줄로 표시할지 개수

  dots: false,                //슬라이더 아래에 도트 네비게이션 버튼 표시 여부(true or false) ▶기본값 false

  appendDots: $('selector'),  //네비게이션 버튼 변경

  dotsClass: 'custom-dots',   //네비게이션 버튼 클래스 변경

  infinite: true,             //무한반복(true or false) 기본값 true

  slidesToShow: 4,            //한번에 보여줄 슬라이드 아이템 개수

  slidesToScroll: 4,          //한번에 넘길 슬라이드 아이템 개수

  slidesPerRow: 1,            //보여질 행의 수 (한 줄, 두 줄 ... )

  autoplay: true,             //슬라이드 자동 시작(true or false) ▶기본값 false

  autoplaySpeed: 2000,        //슬라이드 자동 넘기기 시간(1000ms = 1초) 곧, 슬라이드 하나당 머무는 시간

  variableWidth: true,        //사진마다 width의 크기가 다른가?(true or false) ▶기본값 false

  draggable: false,           //슬라이드 드래그 가능여부 (true or false) ▶기본값 true

  arrows: true,               //이전 다음 버튼 표시 여부(true or false) ▶기본값 true

  pauseOnFocus: true,         //마우스 클릭 시 슬라이드 멈춤 ▶기본값 true

  pauseOnHover: true,         //마우스 호버 시 슬라이드 멈춤 ▶기본값 true

  pauseOnDotsHover: true,     //네이게이션버튼 호버 시 슬라이드 멈춤 ▶기본값 false

  vertical: true,             //세로 방향 여부(true or false) ▶기본값 false

  verticalSwiping: true,      //세로 방향 스와이프 여부(true or false) ▶기본값 false

  accessibility: true,        //접근성 여부(true or false) 기본값 false

  appendArrows: $('#arrows'), //좌우 화살표 변경

  prevArrow: $('#prevArrow'), //이전 화살표만 변경

  nextArrow: $('#nextArrow'), //다음 화살표만 변경

  initialSlide: 1,            //처음 보여질 슬라이드 번호 ▶기본값 0

  centerMode: true,           //중앙에 슬라이드가 보여지는 모드 ▶기본값 false

  centerPadding: '70px',      //중앙에 슬라이드가 보여지는 모드에서 패딩 값

  fade: true,                 //크로스페이드 모션 사용 여부 ▶기본값 false

  speed: 2000,                //모션 시간 (얼마나 빠른속도로 넘어가는지)(1000ms = 1초) 곧, 슬라이드 사이에 넘어가는 속도

  waitForAnimate: true,       //애니메이션 중에는 동작을 제한함 ▶기본값 true

  // ▼ 반응형 브레이크포인트 옵션

  // breakpoint: 숫자를 제작자의 환경에 맞게 조정함 ex) breakpoint: 1280

  // 각 브레이크포인트 내에 settings 안에 위의 모든 옵션을 다르게 적용할 수 있음

  responsive: [

    {

      breakpoint: 1024,

      settings: {

        slidesToShow: 3,

        slidesToScroll: 3,

        infinite: true,

        dots: true

      }

    },

    {

      breakpoint: 600,

      settings: {

        slidesToShow: 2,

        slidesToScroll: 2

      }

    },

    {

      breakpoint: 480,

      settings: {

        slidesToShow: 1,

        slidesToScroll: 1

      }

    }

  ]

});

[/code]