(HTML / CSS / jQuery) slick 슬라이더 transition 적용 예제

slick.js

See the Pen slick 슬라이더 트랜지션 적용 심화 - delay 가능 by kimyangsun (@kimyangsun) on CodePen.

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

slick 슬라이드 트랜지션 적용 (slick slide transition css)

 

slick 슬라이더 플러그인을 사용하여 transition 값을 주어서 애니메이션 효과를 만든 예제입니다.

 

slick-slide 에 slick-active 가 들어갈 때 효과를 주도록 css 를 작성하였습니다.

 

단, 이 경우에 slick 특성상 창을 새로 열거나 새로고침할때 slick-active 클래스가 처음부터 들어가진 상태여서

 

첫번째 슬라이더에 트랜지션이 적용되지 않는 경우가 생깁니다.

 

이후에 슬라이더를 넘길때는 트랜지션 효과가 제대로 적용이 되지만 창을 열었을때 첫번째 슬라이더에 트랜지션이 적용이 되지 않기 때문에 이 경우를 해결하려고 많이 찾아보고 고민한 결과

 

slick 제이쿼리 코드에 .on('init', funtion(event, slick){}); 이벤트 핸들러를 이용하여 

 

창이 새로 열려 초기화될때 slick 을 적용한 슬라이더에 slick-current 클래스를 찾아서 거기에 slick-active 클래스를

 

직접 제거해주고 reset-animation 이라는 자체 클래스를 추가시켜줍니다. 이 자체 클래스가 추가되었을때,

 

css로 transition 이 적용되기 전값으로 duration 0s 를 주어서 바로 돌려보내놓고,

 

그 다음 setTimeout() 을 이용하여 값을 1을 주고 다시 slick-current 에 slick-active 를 주고 reset-animation 은 제거해줌으로써 새창을 열었을때도 첫번째 슬라이드에 애니메이션이 적용이 되도록 하였습니다.