カルーセルスライダーを右から左に流したい
今日はカルーセルスライダーのお話です。
お役に立つかはわかりませんが、私自身の備忘録も兼ねて。
画像が横にだだだーっとながれていく例のあれです。
参考にさせていただいたのは、こちら
【Black Flag】jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法。
jsを調べた人なら一回は出会ってるといっても過言ではないサイト様です。(独断です)
◇このコードをアレンジして、右から左にながれていくようにしたい！
◇そして、画像にマージンを付けたい！
これが今回の課題です。
htmlは上記サイトと一緒です。
ulを囲むdivのID名を”#loopslider”を”#loopslider_r”に変えてあります。
【js】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
$(window).on('load',function(){ $('#loopslider_r').each(function(){ var loopsliderWidth = $(this).width(); var loopsliderHeight = $(this).height(); $(this).children('ul').wrapAll('＜div id="loopslider_r_wrap"＞＜/div＞'); var listWidth = $('#loopslider_r_wrap').children('ul').children('li').width(); var listCount = $('#loopslider_r_wrap').children('ul').children('li').length; var loopWidth = (listWidth+10)*(listCount);//ここに+10を入れる事でliにつけたマージン分の幅が加わります $('#loopslider_r_wrap').css({ top: '0', right: '0',//right:0pxにくるように"right"に書き換えます width: ((loopWidth) * 2), height: (loopsliderHeight), overflow: 'hidden', position: 'absolute' }); $('#loopslider_r_wrap ul').css({ width: (loopWidth) }); loopsliderPosition(); function loopsliderPosition(){ $('#loopslider_r_wrap').css({right:'0'});//right:0pxにくるように"right"に書き換えます $('#loopslider_r_wrap').stop().animate({right:'-' + (loopWidth) + 'px'},25000,'linear');//loopsliderが25秒かけて動く setTimeout(function(){ loopsliderPosition(); },25000);//数字が大きいほど遅い（1000が1秒） }; $('#loopslider_r_wrap ul').clone().appendTo('#loopslider_r_wrap');//クローンを横付けしている }); }); |
※上記コード内のdivは実際は半角で囲んでください。
【css】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#loopslider_r { margin: 0 auto; width: 100%; height: 100px; text-align: right; position: relative; overflow: hidden; } #loopslider_r ul { height: 100px; float: right; display: inline; overflow: hidden; } #loopslider_r ul li { height: 100px; float: right; display: inline; overflow: hidden; margin-right:10px; } |
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が読み込まれていたのかもしれません。
こんな感じで、日々コードとにらめっこしながら制作をしています。