なぜ、スライダープラグインを使わなかったのか？
お客様が、「是非このサイトのスライドを実装して欲しい！」と強いご要望があったからです。
そのサイトのソースを見ると、バリバリのフルスクラッチ！！
自分の腕では到底真似できません
これは、既存のスライダープラグインで、
うまく実装できるか分からなかったので、
javaScriptライブラリで、自作スライドをカスタマイズすることにしました。
実装したかった内容
表示されているスライド以外にもclassを付与する
- 「表示されているスライド」 にclassをつけて、CSS3 Animationを発火させる。
というのは、よくあるのですが、
- 「表示された直後のスライド」 にもclassをつけて、CSS3 Animationを発火させる。
という方法は見たことがなかったので、これをどうするか悩みました。。。
これは、「表示されているスライド」のすぐ下に、
「表示された直後のスライド」を移動させるのに必要となります。
スマホの時、スライドをスワイプさせる
これは、スライダープラグインで当たり前の機能ですが、
自作でできるかちょっと不安でした。。
実装方法
クラス付与させる方法
実装したいスライドと似ている動きだったので、
こちらを参考させていただきましたm（_ _）m
TweenMaxを使って自作スライドを制作されています。
https://codepen.io/jonathan/pen/qqmBjQ
これを改造し、
表示された直後のスライドにもclassを付与することに成功しました！
クラスを付与した瞬間に
スライドと、その中の要素のCSS3 Animationを発火させています。
これだと、Animationがカスタマイズしやすいのがメリットです。
スマホの時、スライドをスワイプさせる
こちらを参考させていただきましたm（_ _）m
jQueryでとても簡単に実装できました！
https://qiita.com/Hijiri-K/items/5ad5eaec10c0e7921ada
実装したアニメーションがこれです（CodePen）
- 表示されているスライドには.is-nowを付与
- 表示された直後のスライドには.is-oldを付与
しています。