[Plugins] slick 자주 사용하는 옵션, 함수 정리

Slick 플러그인은 다양한 옵션, 함수를 제공하여 이미지 슬라이더와 갤러리를 다양하게 커스터마이즈할 수 있습니다. 이러한 옵션, 함수들을 사용하여 슬라이더의 동작, 디자인, 네비게이션 등을 조정할 수 있습니다. 아래는 Slick 플러그인에서 자주 사용되는 몇 가지 주요 옵션, 함수들에 대한 설명입니다.

---

slick 자주 사용하는 옵션

<div class="slider">
  <div><img src="image1.jpg" alt="Image 1"></div>
  <div><img src="image2.jpg" alt="Image 2"></div>
  <div><img src="image3.jpg" alt="Image 3"></div>
</div>

<script>
    $(function(){
	$('.slider').slick({
            rows: 1,                //몇 줄로 나타낼건지
            infinite: true,         //무한반복 (boolean) -default:true
            slidesToShow: 4,        //한번에 보여지는 갯수
            slidesToScroll: 4,      //한번에 넘겨지는 갯수
            slidesPerRow: 1,        //보여질 행의 수 (한 줄, 두 줄 ... )
            autoplay: true,         //자동시작 (boolean) -default:false
            autoplaySpeed: 2000,    //자동넘기기 시간(int, 1000ms = 1초)
            dots: false,            //네비게이션버튼 (boolean) -default:false
            appendDots: $('#dots'), //네비게이션버튼 변경 (선택자 혹은 $(element))
            dotsClass: 'custom-dots', //네비게이션버튼 클래스 변경
            variableWidth: true,    //width의 크기가 다를때 (boolean) -default:false
            draggable: false,       //리스트 드래그 가능여부 (boolean) -default:true
            arrows: true,           //화살표(넘기기버튼) 여부 (boolean) -default:true
            pauseOnFocus: true,     //마우스 포커스 시 슬라이드 멈춤 -default:true
            pauseOnHover: true,     //마우스 호버 시 슬라이드 멈춤 -default:true
            pauseOnDotsHover: true, //네이게이션버튼 호버 시 슬라이드 멈춤 -default:false
            vertical: true,         //세로방향 여부 (boolean) -default:false
            verticalSwiping: true,  //세로방향 스와이프 여부 (boolean) -default:false
            accessibility: true,    //접근성 여부 (boolean) -default:true
            asNavFor: '.jsVisualBtn' //slick slider가 2개일 경우 서로 연동(?) (선택자 혹은 $(element))
            appendArrows: $('#arrows'), // 좌우 화살표 변경 (선택자 혹은 $(element))
            prevArrow: $('#prevArrow'), // 좌 (이전) 화살표만 변경 (선택자 혹은 $(element))
            nextArrow: $('#nextArrow'), // 우 (다음) 화살표만 변경 (선택자 혹은 $(element))
            initialSlide: 1,        //처음 보여질 슬라이드 번호 -default: 0
            centerMode: true,       //중앙에 슬라이드가 보여지는 모드 -default:false
            centerPadding: '60px',  //중앙에 슬라이드가 보여지는 모드에서 padding값
            fade: true,             //fade 효과 -default:false
            speed: 2000,            //모션 시간 (1000 = 1초)
            waitForAnimate: true,   //애니메이션 중에는 동작을 제한함 -default:true
            rtl: true,              //slider 방향을 오른쪽에서 왼쪽으로 변경 -default:false
            responsive: [
                {
                    breakpoint: 1024,   //width 1024px 미만
                    settings: {
                        slidesToShow: 3,
                        slidesToScroll: 3
                    }
                },
                {
                    breakpoint: 480,   //width 480px 미만
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                }
            ] //반응형, breakpoint: 반응형 구간, settings: 반응형 구간에 따른 설정 변경
        });
    });
</script>

---

slick 자주 사용하는 함수

슬라이드 해제

$('.slider').slick("unslick")

 

슬라이드 정지/재생

$('.slider').slick('slickPause'); //정지
$('.slider').slick('slickPlay');  //시작

 

슬라이드 이동

$('.slider').slick('goTo', 1);
//ex) $('.slider').slick('goTo', index); index는 0부터 시작

 

슬라이드 전/후 호출

$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    //슬라이드 전 호출
});

$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
    //슬라이드 후 호출
});

//... currentSlide, nextSlide 는 current, next로 써도 무관