5年ほど前にもWebページ上の要素がスライドアニメーションによって
流れ続けるループスライダーのスクリプトを紹介しましたが
ブラウザによってスライド動作を長時間続けると動作が重くなったり、
いくつか懸念点があったので、そのような懸念点の改善と
スクリプト全体をよりシンプルな構成にしたものを紹介してみます。
【横スライドパターン】
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法
「横スライドパターン:jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示
まずは横方向にスライドするパターンの実装についてです。
Webページに横に並べられた要素が
右から左へ流れ続けます。
動作自体はただひたすら要素が流れ続けるシンプルなものです。
スライド全体にマウスオーバーした際には
スライド動作を一時的に止め、マウスアウトするとスライドが再開します。
全体構成についてまずはHTMLから。
◆HTML <div class="loopSlider"> <ul> <li><a href="#"><img src="img/photo1.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo2.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo3.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo4.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo5.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo6.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo7.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo8.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo9.jpg" width="100" height="100" alt=""></a></li> <li><a href="#"><img src="img/photo10.jpg" width="100" height="100" alt=""></a></li> </ul> </div><!--/.loopSlider-->
スライド動作させる要素は<ul>を使ってリストで構成し
そのリスト全体は任意のブロック要素で囲います。
リストの中の要素に<a>タグでリンクを貼っていますが
これは動作自体には特に影響しないものになるので
不要な場合は外してしまって問題ありません。
この要素に対してCSSは以下のように指定します。
◆CSS /* ------------------------------ loopSlider ------------------------------ */ .loopSliderWrap { top: 0; left: 0; height: 100px; overflow: hidden; position: absolute; } .loopSlider { margin: 0 auto; width: 500px; height: 100px; text-align: left; position: relative; overflow: hidden; } .loopSlider ul { height: 100px; float: left; overflow: hidden; } .loopSlider ul li { width: 100px; height: 100px; float: left; display: inline; overflow: hidden; } /* ------------------------------ CLEARFIX ELEMENTS ------------------------------ */ .loopSliderWrap:after { content: ""; display: none; clear: none; }
一番最初にある「.loopSliderWrap」は
スクリプト側から生成するブロック要素になり
このセレクタに対しては表示するスライダーの高さを指定しておきます。
HTML側でリスト全体を囲んだブロック要素「.loopSlider」には
要素がスライドする際の、表示する領域の幅と高さを指定します。
中の<ul>や<li>といったリスト要素は
「float」を使って横に並べるようにします。
そして、実際の横方向にスライドするループスライド動作スクリプトは
以下の様になります。
◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="js/jquery.pause.min.js"></script> <script> $(function(){ var setElm = $('.loopSlider'), slideSpeed = 2000; setElm.each(function(){ var self = $(this), selfWidth = self.innerWidth(), findUl = self.find('ul'), findLi = findUl.find('li'), listWidth = findLi.outerWidth(), listCount = findLi.length, loopWidth = listWidth * listCount; findUl.wrapAll('<div class="loopSliderWrap" />'); var selfWrap = self.find('.loopSliderWrap'); if(loopWidth > selfWidth){ findUl.css({width:loopWidth}).clone().appendTo(selfWrap); selfWrap.css({width:loopWidth*2}); function loopMove(){ selfWrap.animate({left:'-' + (loopWidth) + 'px'},slideSpeed*listCount,'linear',function(){ selfWrap.css({left:'0'}); loopMove(); }); }; loopMove(); setElm.hover(function() { selfWrap.pause(); }, function() { selfWrap.resume(); }); } }); }); </script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
setElm = $(‘.loopSlider’) | スライド全体を囲うブロック要素(IDでも可) |
---|---|
slideSpeed = 2000 | 一つのリスト要素がスライド移動する時間 |
「slideSpeed」はリスト一つが横に移動する時間になり、
スライド全体が移動するアニメーション時間は
ここで指定した値×リスト数となります。
スピードを早めるには値を小さくし、
ゆっくりさせる場合には値を大きくします。
「setElm」で指定した要素がマスク的な役割をし
その中に入る<ul>リスト要素全体を「.loopSliderWrap」の名前のブロック要素で覆い
「left」の値を操作してアニメーションさせスライド移動させています。
マウスオーバーでのストップ動作はjQueryアニメーションを
一時停止、再開させることができる「jquery.pause.js」プラグインを使用しています。
Pause:A jQuery plugin to pause and resume animations
マウスオーバーのストップ動作はスクリプトの
34行目~38行目になるのでこの動作が不要な場合にはこの部分を削除し
3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。
・書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」出版について
http://black-flag.net/jquery/20160202-5926.html
【縦スライドパターン】
jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法
「縦スライドパターン:jQueryで要素が流れ続けるループスライダーをシンプルに実装する方法」サンプルを別枠で表示
続いて、縦方向にスライドするパターンの実装について。
Webページに縦に並べられた要素が
下から上へ流れ続けます。
こちらの動作自体も横タイプと同様にただひたすら要素が下から上に流れ続けるシンプルなものです。
横スライドパターン同様に
スライド全体にマウスオーバーした際には
スライド動作を一時的に止め、マウスアウトするとスライドが再開します。
全体構成について、
HTMLは横スライドパターンと同じになるので説明は省略します。
CSSは以下のように指定します。
◆CSS /* ------------------------------ loopSlider ------------------------------ */ .loopSliderWrap { top: 0; left: 0; width: 100px; overflow: hidden; position: absolute; } .loopSlider { margin: 0 auto; width: 100px; height: 500px; text-align: left; position: relative; overflow: hidden; } .loopSlider ul { width: 100px; overflow: hidden; } .loopSlider ul li { width: 100px; height: 100px; overflow: hidden; }
CSSもほぼ横スライドパターンと同じですが
こちらではリストに対して「float」などは指定しないで
通常の縦並びにしておきます。
HTML側でリスト全体を囲んだブロック要素「.loopSlider」には
要素が縦方向にスライドする際の、表示する領域の幅と高さを指定します。
そして実際の縦方向のループスライド動作スクリプトは
以下の様になります。
◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="js/jquery.pause.min.js"></script> <script> $(function(){ var setElm = $('.loopSlider'), slideSpeed = 2000; setElm.each(function(){ var self = $(this), selfHeight = self.innerHeight(), findUl = self.find('ul'), findLi = findUl.find('li'), listHeight = findLi.outerHeight(), listCount = findLi.length, loopHeight = listHeight * listCount; findUl.wrapAll('<div class="loopSliderWrap" />'); var selfWrap = self.find('.loopSliderWrap'); if(loopHeight > selfHeight){ findUl.css({height:loopHeight}).clone().appendTo(selfWrap); selfWrap.css({height:loopHeight*2}); function loopMove(){ selfWrap.animate({top:'-' + (loopHeight) + 'px'},slideSpeed*listCount,'linear',function(){ selfWrap.css({top:'0'}); loopMove(); }); }; loopMove(); setElm.hover(function() { selfWrap.pause(); }, function() { selfWrap.resume(); }); } }); }); </script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
setElm = $(‘.loopSlider’) | スライド全体を囲うブロック要素(IDでも可) |
---|---|
slideSpeed = 2000 | 一つのリスト要素がスライド移動する時間 |
横スライドのパターンと同様に
「slideSpeed」はリスト一つが縦に移動する時間になり、
スライド全体が移動するアニメーション時間は
ここで指定した値×リスト数となります。
スピードを早めるには値を小さくし、
ゆっくりさせる場合には値を大きくします。
「setElm」で指定した要素がマスク的な役割をし
その中に入る<ul>リスト要素全体を覆う「.loopSliderWrap」の「top」の値を操作して
縦方向にアニメーションさせスライド移動させています。
マウスオーバーでのストップ動作は「jquery.pause.js」プラグインを使用します。
マウスオーバーのストップ動作はスクリプトの
34行目~38行目になるのでこの動作が不要な場合には
3行目で読み込んでいる「jquery.pause.js」プラグインファイル自体も読み込まないようにしてください。
・書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」出版について
http://black-flag.net/jquery/20160202-5926.html
以上が横方向と縦方向の無限ループスライダーのシンプルな実装方法でした。
注目させたい商品が複数ある場合や、
Webページ上に並べたいバナーが数多くあるときなど
ユーザーの目を惹きつける意味でもこのようなループスライダーは効果的かと思っています。
無限にループし続けるスライダーを設置する際にぜひ。。。
いつも参考にさせていただいております^ ^
あとご質問があるんですが、
画像上にテキストをつけて動かしたい場合はどうしたらいいでしょうか。。。
>fearonさん
コメントありがとうございます。
画像の上にテキストをつけるには
スクリプトにはとくに影響ありませんので
HTMLのリスト内にテキストを追加し
CSSで配置位置などの調整をすることで実装可能です。
お試しください。
よろしくお願いします。
いつもありがとうございます。
質問なのですが、
width=”100%”で、横幅フルで表示がしたいのですが、
良い方法があればご教示願いたいです。
>monkeyさん
コメントありがとうございます。
スライダーを幅100%にするには
「.loopSlider」のwidthの値を100%にすることで可能となります。
ただし、構成上スライドする要素の総幅が
「.loopSlider」の幅よりも大きくないと動作しませんので
スライドさせる要素が少ない場合は
スライド動作しなくなってしまうことがあるので
中の要素の数や大きさ調整をしていただければと思います。
お試しください。
よろしくお願いします。
いつも本当に、ありがとうございます。
1つ質問させていただきたいのですが
スワイプ処理などで、前後にカルーセルを動かす処理を付けたいのですが
可能でしょうか?
もし何かいい方法があれば教えていただきたいです。
>Holgaさん
コメントありがとうございます。
ご質問いただきましたスワイプ処理についてですが
もともとそのような動作を想定していない構成になっているので
多少の調整では実現が厳しいかと思っております…
またその様な仕様でのスライダーのサンプルができましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
ちょうど欲していた動作が簡単に作成でき大変感謝しております。
1点、幅の違う画像を使用すると隙間が出来てしまいます。
以前のループスライダー(http://black-flag.net/jquery/20110707-3305.html)では幅の異なる画像にも対応されていましたが、マウスオーバーで停止するこちらを使用したいので、ぜひ改善していただけると嬉しいです。
ご検討よろしくお願いします。
>osusiさん
コメントありがとうございます。
幅の違う画像を使用する際には
CSSの「.loopSlider ul li」で指定している「width」の値を削除することで
可能になるのではないかと思います。
お試しください。
よろしくお願いします。
いつも参考にさせていただいております。
少し場違いなご質問なのですが,もしかしたら気分を害するようなお気持ちにさせてしまうと思いますが・・・
ここ最近はJqueryをネガティブなJavascriptで利用してJquery不要論というのを見かけますが、もしよろしければBlackFlagさまのご意見をお聞きしたいです。
私自身いままでJqueryでいろいろなサイトさまのコードを参考にさせていただきWebページに動きを加えてきましたが、いざ素のJavascriptでDOM操作をしていくと記述するコードの多さとfadeInやfadeOutなどのアニメーション処理やSlideUpのやり方などがわからず素のjavascriptで表現する大変さからどれだけJqueryの恩恵があるのかとしみじみ思います。
あとは、jqueryの実例コード的なコードをネガティブなjavascriptに書き換えたコードなどの参考例などがネット上でほとんどみかけません。(私自身プログラミングが大の苦手なのもありますが)
※長文で申し訳ありません。
>アシベさん
コメントありがとうございます。
以前からjQueryを使わずにJavaScriptで実装するのが適切というのはよく見かけますが
もともとJavaScriptの難易度が高く、
もっと直感的にスクリプト操作ができるように開発されたのがjQueryになるので、
今でもJavaScriptが苦手でjQueryならば実装できる、という場合は
jQueryを使うことは悪いことではないと思っています。
ネイティブなJavaScriptに慣れてスクリプトをかけるようになった方が
jQueryを使用するよりも軽量化することができたりほかにもメリットはありますが
実装するものにかけられる、時間・コスト・優先する対象によって変わってくるものかと考えています。
業務として使用する場合は、クライアントからコスト削減を求められる場合が多いと思うので
jQueryを使った方が簡単に実装できて作業軽減にもつながるということであれば
jQueryを使用していいと思っています。
作成するものの動作軽減を最優先として、製作コストも余裕があるという場合は
時間がかかってもネイティブなJavaScriptで実装するのがよいと思います。
どちらにしてもユーザーのことを考えると
いかに動作を軽量化して実装するのかが重要にもなってくるので
自分でもjQueryを使用せずに動作させられるものは
JavaScriptやCSSで実装することはやっているので
そこは少しずつでもできるところから試してみるのがいいのではないでしょうか。
いまいち明確な返答になっていないかもしれませんが
作成するものの状況によって実装する手法を選択すればよいと考えています。
よろしくお願いします。
>BlackFlagさま
コメントありがとうございます。
>もっと直感的にスクリプト操作ができるように開発されたのがjQueryになるので
そうですね。Jqueryが開発された経緯は元々Javascriptが苦手な方でも直感的に操作する ことを目指して開発されたのが元でしたね。
たしかにネイティブなJavascriptに変換しなおしても膨大な時間・保守などの問題で苦労する場面もでてくるのは当然ですので、一気に直していくのではなく少しずつ時間をかけて行っていくということを忘れておりました・・・
あと、このコメントを打ち込んでいる際に気づいたことがあります。私自身が情報を集めたりしているサイト様のほとんどがWeb制作会社の方々のブログだったということです。
環境の違い・知識の違い・現場の人と趣味の人間とでは考え方や運用が違うのは当然だったということです。
>JavaScriptやCSSで実装することはやっているので
そこは少しずつでもできるところから試してみるのがいいのではないでしょうか。
私の場合は一気にやって燃え尽きるやり方ばかりやっているので、これからは少しずつできるところから時間をかけてやっていこうと思います。
貴重なご意見をありがとうございました。これからも頑張ってください。
いつもいろいろ参考にさせていただき、
大変助かっています。
早速質問なのですが、
いくつかループするスライダーを拝見させていただき
クローンを使用せずにループするスライダーを作成する事は
できるのでしょうか。
よろしくお願いいたします。
>フジさん
コメントありがとうございます。
クローンさせないループスライダーについては
申し訳ありませんが作成方法は思いつきません…
そのような構成のプラグインもあるかもしれませんが
当記事でのループスライダーはクローンがマストの仕様になっております。
よろしくお願いします。