jQuery

slick slider 옵션 한글 정리

OOQ 2023. 6. 20. 10:38
728x90
SMALL
$('.slider_area').slick({
    rows: 1,             //이미지를 몇 줄로 나타낼건지 (int)
    dots: false,         //네비게이션버튼 (boolean) -default:false
    appendDots: $('#dots'), //네비게이션버튼 변경 (선택자 혹은 $(element))
    dotsClass: 'custom-dots', //네비게이션버튼 클래스 변경
	infinite: true,      //무한반복 (boolean) -default:true
	slidesToShow: 4,     //한번에 보여줄 사진의 갯수(int)
	slidesToScroll: 4,   //한번에 넘길 사진의 갯수(int)
    slidesPerRow: 1,     //보여질 행의 수 (한 줄, 두 줄 ... )
	autoplay: true,      //자동시작 (boolean) -default:false
	autoplaySpeed: 2000, //자동넘기기 시간(int, 1000ms = 1초)
    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
    appendArrows: $('#arrows'), // 좌우 화살표 변경 (선택자 혹은 $(element))
    prevArrow: $('#prevArrow'), // 좌 (이전) 화살표만 변경 (선택자 혹은 $(element))
    nextArrow: $('#nextArrow'), // 우 (다음) 화살표만 변경 (선택자 혹은 $(element))
    initialSlide: 1,     //처음 보여질 슬라이드 번호 -default: 0
    centerMode: true,    //중앙에 슬라이드가 보여지는 모드 -default:false
    centerPadding: '70px',  //중앙에 슬라이드가 보여지는 모드에서 padding값
    fade: true,          //모션 사용 여부 -default:false
    speed: 2000,         //모션 시간 (얼마나 빠른속도로 넘어가는지)(int, 1000ms = 1초)
    waitForAnimate: true, //애니메이션 중에는 동작을 제한함 -default:true
    responsive: [
        {
            breakpoint: 1024, //breakpoint: 반응형 구간
            settings: {  //settings: 반응형 구간에 따른 설정 변경
                slidesToShow: 3,
                slidesToScroll: 3
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 2
            }
        }
    ] //반응형
});

 

728x90
LIST