(HTML / CSS / jQuery) slick 슬라이더 마우스 휠 스크롤

slick.js

See the Pen slick slider 마우스 휠 스크롤 + 내부 콘텐츠 스크롤 by kimyangsun (@kimyangsun) on CodePen.

 

slick 슬라이더에서 스크롤 기능을 추가한 예제입니다.

슬라이더 자체에 onwheel 이벤트를 사용하여 deltaY 값을 이용하여 슬라이드가 넘어가고 되돌아가는 기능을 구현한 상태입니다.

그리고 슬라이더 안에 스크롤이 있는 콘텐츠가 있는 경우도 넣어뒀는데 innerText에 stopPrapagation()을 줘서

상위요소의 스크롤이벤트가 적용되지 않도록 막아주었습니다.

여기서 추가로 추가해볼 수 있는 기능은 내부 콘텐츠의 스크롤이 최하단이나 최상단에 위치할때

slickPrev or slickNext로 슬라이드가 이동될 수 있도록 하는 부분이 있을 것 같습니다.

추후에 적용해볼 생각입니다 :)