Q&A
具体的なサンプルもありがとうございます！
こちらで作ってみます。
スライドに関しての質問です。
7枚ある画像を、順番にスライドしていきたいです。
１枚目から２枚目、2枚目から3枚目…と、それぞれ異なる秒数で動き、
７枚目に達したら、１枚目へ戻り同じものを繰り返す。
というものを作りたいのですが、ひとつずつに動きをつけなければならないでしょうか？
イージングは全てeaseoutelasticを使用したいです。
回答2件
0
画像の横スライド機能を作る際、
大抵用いる手段としてはこのようなDOMで構成されます。
HTML
1<div class="slideshow" style="overflow: hidden;"> 2 <ui> 3 <li style="display: inline-block;"><img src="image1.jpg"></li> 4 <li style="display: inline-block;"><img src="image2.jpg"></li> 5 <li style="display: inline-block;"><img src="image3.jpg"></li> 6 <li style="display: inline-block;"><img src="image4.jpg"></li> 7 <li style="display: inline-block;"><img src="image5.jpg"></li> 8 <li style="display: inline-block;"><img src="image6.jpg"></li> 9 <li style="display: inline-block;"><img src="image7.jpg"></li> 10 </ui> 11</div>
この時、uiに左上を起点に「縦xxPx、横xxPx移動した」という情報が存在します。
JavaScriptでこのxxPx移動したという情報を読み込んだり、書き換えたりして制御しています。
というものを作りたいのですが、ひとつずつに動きをつけなければならないでしょうか？
上記の理由により違います。
スライドするそのもの。
つまりui要素のスクロール情報さえ制御すればスライド機能は作れます。
ただし、画像１の左に画像7を持ってきて無限ループにしたい等の要望があった場合は、
そのハンドリングは中々に高度かつ大変です。
自作するのではなく、jQueryのプラグインか何かを探したほうが圧倒的に楽で早いと思います。
投稿2018/03/16 03:21
総合スコア21158
0
ベストアンサー
miyabi-sunさんのおっしゃるように何かしらのライブラリを使うのが現実的だと思います。
たとえばメジャーどころの slick（http://kenwheeler.github.io/slick/）を使った場合、
ご希望の動きは下記のようなサンプルで再現可能かと思います。
https://www.6666666.jp/html/20170831/
投稿2018/03/16 09:57
総合スコア85
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/16 11:16