長屋 お役立ち

カルーセルスライダーを右から左に流したい

今日はカルーセルスライダーのお話です。
お役に立つかはわかりませんが、私自身の備忘録も兼ねて。

画像が横にだだだーっとながれていく例のあれです。

参考にさせていただいたのは、こちら
【Black Flag】jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法
jsを調べた人なら一回は出会ってるといっても過言ではないサイト様です。(独断です)

◇このコードをアレンジして、右から左にながれていくようにしたい!
◇そして、画像にマージンを付けたい!

これが今回の課題です。

htmlは上記サイトと一緒です。
ulを囲むdivのID名を”#loopslider”を”#loopslider_r”に変えてあります。

【js】

※上記コード内のdivは実際は半角で囲んでください。

 

【css】

ulの横幅を取得して、#loopslider_r_wrapという、ul×2をしたものを作成し、position:absoluteとfloat:rightでどんどん右寄せにしていく。
そして、ulが切れるところで次のulがright:0pxにくるため、実際は入れ替わってるわけですが、ずっと横に流れてるように見える、という仕組み。
ulの横幅を最初に取得しているので、cssでliにマージンをつけると、ulの横幅分を25秒かけて動くけど、次のが25秒後に入れ替わっちゃうから、ブツっとループが切れてしまいます。

なので、最初の
var loopWidth = (listWidth+10)*(listCount)
liの長さ×liの数=25秒かけて動く幅
のliにつけたいマージン分を足すことが必要になったというわけです。
なので、マージンに20pxつけたいと思ったら+20になるというわけです。

最初に入れたとき、“$(function()”でいれたのですが、読み込む順番の都合により表示されないことが2回に一回くらいありました。困った。

なので、読み込むタイミングを“$(window).on(‘load’,function()”に変更。
“$(window).on(‘load’,function()”にすることによって、画像やscript要素やlink要素で読み込んでいるJavaScirptファイルやCSSファイルなどすべての読み込みが終了したタイミングで読み込むことができます。
表示されなかったときは、おそらく、画像を読み込む前にjsが読み込まれていたのかもしれません。

こんな感じで、日々コードとにらめっこしながら制作をしています。