프로그래밍 자료/JavaScript

슬릭 슬라이더 옵션 한글 설명

미친사람 2022. 4. 19. 20:19
반응형
$(document).ready(function(){
  $('.test').slick({
    autoplay : true , // 자동 슬라이드
    autoplaySpeed : 2000 , // 자동슬라이드 넘어가지는 속도 (ms)
    arrows : true , // 화살표 만들기.
    centerMode: false , // 보여지는 슬라이드를 중앙에 놓는 모드
    centerPadding : "50px" , //센터 모드일때. 양옆 슬라이드가 보이는 크기.
    dots: true , // 하단 닷츠 네비게이션 활성화
    draggable : true , // 드래그로 슬라이드변경 허용 여부
    fade: false , // fade in , fade out 활성화
    infinite: false , // 무한이 옆으로 흐르게 만드는 슬라이드
    initialSlide: 0 , // 처음에 활성화 될 슬라이드 번호 (인덱스 번호로)
    pauseOnHover: false , //마우스가 올라갔을 때 이동 여부
    pauseOnDotsHover: true , // 마우스가 닷츠에 올라갓을때 이동 여부
    cssEase: "linear" , // transition-timing-function 적용하기 큐빅배지어도가능
    rows: 1 , // 이미지를 몇줄로 만들꺼냐
    slidesToShow: 3, // 한번에 보여질 슬라이드 개수
    slidesToScroll: 1 , //한번에 넘길 슬라이드 개수
    speed: 1000 , //슬라이드가 넘어가지는 속도 (ms)
    swipe:  true , // 마우스 드래그로 넘기는거 허용 여부
    swipeToSlide: true , // 드래그로 여러슬라이드 넘기기 가능 여부
    vertical: false ,  // 상하 슬라이드로 변경
    verticalSwiping: true , // 상하 드래그로 슬라이드 넘기기
    responsive:   // 미디어 쿼리 기능
      [
        {
          breakpoint: 500,
          settings: {
            slidesToShow: 2,
          }
        },
        {
          breakpoint: 300,
          settings: {
            slidesToShow: 1,
          }
        }
      ],
  }); 
});
반응형