Slick.js에서 드래그 대신 마우스 스크롤을 사용하는 방법?

Question

slick.js로 스크롤을 구현하는 가장 좋은 방법은 무엇입니까? 그러면 마우스로 스크롤 할 때 다음 슬라이드로 바뀝니 까? 또는 내가 놓친 설정이 있습니까?

여기에 내가 언급 한 내용이 있습니다. http://kenwheeler.github.io/slick/

Answer 1

wheel 이벤트를 사용하여 스크롤을 구현할 수 있습니다. 이는 포인팅 장치의 휠 버튼 (일반적으로 마우스)이 회전 할 때 발생합니다.

const slider = $(".slider-item"); 
 
slider 
 
    .slick({ 
 
    dots: true 
 
    }); 
 

 
slider.on('wheel', (function(e) { 
 
    e.preventDefault(); 
 

 
    if (e.originalEvent.deltaY < 0) { 
 
    $(this).slick('slickNext'); 
 
    } else { 
 
    $(this).slick('slickPrev'); 
 
    } 
 
}));

.container { 
 
    margin: 0 auto; 
 
    padding: 40px; 
 
    width: 80%; 
 
    color: #333; 
 
    background: #419be0; 
 
} 
 

 
.slick-slide { 
 
    text-align: center; 
 
    color: #419be0; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css" /> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css" /> 
 

 
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script> 
 

 

 

 
<div class='container'> 
 
    <div class='slider-item'> 
 
    <div> 
 
     <h3>1</h3> 
 
    </div> 
 
    <div> 
 
     <h3>2</h3> 
 
    </div> 
 
    <div> 
 
     <h3>3</h3> 
 
    </div> 
 
    <div> 
 
     <h3>4</h3> 
 
    </div> 
 
    <div> 
 
     <h3>5</h3> 
 
    </div> 
 
    <div> 
 
     <h3>6</h3> 
 
    </div> 
 
    </div> 
 
</div>