왜 슬라이더 플러그인을 사용하지 않았습니까?

고객이 "꼭이 사이트의 슬라이드를 구현하고 싶다!"라고 강한 요청이 있었기 때문입니다.
그 사이트의 소스를 보면, 바리 발리의 풀 스크래치! !
자신의 팔에서 도저히 흉내낼 수 없습니다

이것은 기존 슬라이더 플러그인이며,
잘 구현할 수 있는지 몰랐기 때문에,
자바 스크립트 라이브러리에서 자체 제작 슬라이드를 사용자 정의하기로 결정했습니다.

구현하고 싶은 내용

표시된 슬라이드 이외에도 클래스를 부여합니다.

"표시된 슬라이드"
에 class를 붙여 CSS3 Animation을 발화시킨다.

라는 것은 자주 있는데,

「표시된 직후의 슬라이드」
에도 class를 붙여 CSS3 Animation을 발화시킨다.

라는 방법은 본 적이 없었기 때문에 이것을 어떻게 할지 고민했습니다. . .
이것은 '표시된 슬라이드' 바로 아래에,
"표시된 직후 슬라이드"를 이동하는 데 필요합니다.

스마트 폰 때 슬라이드를 스 와이프

이것은 슬라이더 플러그인에서 당연한 기능이지만,
자작으로 할 수 있을까 조금 불안했습니다. .

구현 방법

수업 부여 방법

실장하고 싶은 슬라이드와 비슷한 움직임이었기 때문에,
여기를 참고하셨습니다 m(_ _)m
TweenMax를 사용하여 자체 제작 슬라이드를 제작합니다.
htps : // 코데펜. 이오 / 조나 짱 / 펜 / qmBjQ

이것을 개조하고,
표시된 직후 슬라이드에도 클래스를 부여하는 데 성공했습니다!

수업을 부여한 순간에
슬라이드와 그 안의 요소의 CSS3 Animation을 발화시키고 있습니다.
이것이라면, Animation이 커스터마이즈하기 쉬운 것이 장점입니다.

스마트 폰 때 슬라이드를 스 와이프

여기를 참고하셨습니다 m(_ _)m
jQuery로 매우 쉽게 구현할 수있었습니다!
htps : // 코 m / 히지리 K / ms / 5 a d5 에어 c10c0 에 7921 아다

구현한 애니메이션이 이것입니다 (CodePen)

표시된 슬라이드에 .is-now를 부여

표시된 직후 슬라이드에 .is-old를 부여

하고 있습니다.