なぜ、スライダープラグインを使わなかったのか?
お客様が、「是非このサイトのスライドを実装して欲しい!」と強いご要望があったからです。
そのサイトのソースを見ると、バリバリのフルスクラッチ!!
自分の腕では到底真似できません
これは、既存のスライダープラグインで、
うまく実装できるか分からなかったので、
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**を付与
しています。