(HTML / CSS / javascript / jQuery) slick 슬라이더 centerMode 사용하기

slick.js

See the Pen 중앙 컨텐츠 3차 - visual story 1차 by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/xxGGKWL

중앙 컨텐츠 3차 - visual story 1차

 

slick 슬라이더 플러그인을 사용하여 슬라이더를 만든 후 centerMode 를 사용하여 중앙에 아이템이 위치하고

 

양옆으로 슬라이더가 돌아가는 형식으로 만들어 보았습니다.

 

여기서 중요한점은 슬라이더에 transition 이 들어갈 경우 slick 슬라이더를 사용하면 슬라이더 마지막 페이지에서

 

첫페이지로 넘어가거나 첫페이지에서 마지막 페이지로 넘어갈때 이상하게 트랜지션이 적용이 안되는 경우가 있어서

 

이 부분을 slick 이벤트에 관련된 코드를 추가시킴으로써 해결시켰습니다.

 

slick-center, 즉 현재 슬라이더의 페이지일 경우에는 크기가 살짝 크고 옆으로 넘어가면 크기가 작아지는 것을

 

확인할 수 있습니다.

 

자세한 코드는 링크를 통해 확인할 수 있습니다.