Webサイト上でバナーや商品のサムネイル画像などの見せ方として、
並べられた画像（コンテンツ要素）を一定のスピードで自動でスライドして、
無限ループさせているものをたまに見かけます。
そんなビューアー的役割のコンテンツ無限ループスライダーを
作ってみたので紹介してみます。
まずは動作のサンプルから。
jQuery LOOPSLIDER【SAMPLE】
10個並べてある画像が自動でスライドし、
無限にループしています。
この動作の全体構成について、
HTMLから。
◆HTML <div id="loopslider"> <ul> <li><a href="#"><img src="img/photo01.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo02.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo03.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo04.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo05.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo06.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo07.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo08.jpg" width="100" height="100" alt="" /></a></li> <li><a href="#"><img src="img/photo09.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-->
大枠を任意のIDで覆い（サンプルでは「#loopslider」とします）、
そのブロック要素に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
スライドさせるコンテンツ要素を増やしたり減らしたりする時には、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
#loopslider {
margin: 0 auto;
width: 500px;
height: 100px;
text-align: left;
position: relative;
overflow: hidden;
}
#loopslider ul {
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider ul li {
width: 100px;
height: 100px;
float: left;
display: inline;
overflow: hidden;
}
/* =======================================
ClearFixElements
======================================= */
#loopslider ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#loopslider ul {
display: inline-block;
overflow: hidden;
}
全体を囲むブロック要素「#loopslider」の値を
ループスライダーの表示領域としています。
中に入る＜ul＞はスクリプト側でもう一つクローンを作って、
同じ＜ul＞を2つを並べる構成になるので、
CSSでは「float:left;」で回り込み指定をしています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#loopslider').each(function(){
var loopsliderWidth = $(this).width();
var loopsliderHeight = $(this).height();
$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');
var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
var listCount = $('#loopslider_wrap').children('ul').children('li').length;
var loopWidth = (listWidth)*(listCount);
$('#loopslider_wrap').css({
top: '0',
left: '0',
width: ((loopWidth) * 2),
height: (loopsliderHeight),
overflow: 'hidden',
position: 'absolute'
});
$('#loopslider_wrap ul').css({
width: (loopWidth)
});
loopsliderPosition();
function loopsliderPosition(){
$('#loopslider_wrap').css({left:'0'});
$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},25000,'linear');
setTimeout(function(){
loopsliderPosition();
},25000);
};
$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
});
});
</script>
4行目にある「#loopslider」がスクリプトを実行させるID名になるので
HTML側で全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
スライドさせるスピードは＜ul＞全体が「#loopslider」の端から端まで何秒で移動するか、
が速度設定になっているので、上記スクリプトの中盤下あたりの
「function loopsliderPosition()」にある「25000」の値２つを変更させることで
スピードの調節が可能になります。（ここの２つの値は常に同じ値で）
マーキーと同じような動作ではありますが
この様なコンテンツ要素を常にスライドさせることで
サイト内で目を惹くおもしろい動きも実装することが出来るかな、とも感じています。
シンプルなコンテンツ無限ループスライダーが必要になった際に是非。。。
【2012/10/13】 ページ内での複数設置およびスライド移動の方向選択を可能としたループスライダー改訂版スクリプトを作成しました。詳細はこちらから
IE8では動かないみたいですね。。。
コメントありがとうございます！
こちらで確認する限り、IE8でも問題なく動作しています！
OSはWin XPと7で動作確認済みです。
ローカルにサンプルデータをダウンロードして動作確認する際には
IE8ではスクリプトの実行を押さないとJS自体が機能しないので
その辺り、ご確認いただけますでしょうか。
やっと見つけましたこの動き！！
実は、http://cweb.canon.jp/camera/eosd/kisssp/のような流れる画像を作りたいのですが、初心者には難しくて・・・。
このサンプルに、http://cweb.canon.jp/camera/eosd/kisssp/のような
両サイドに矢印を付けて・・・という事は出来るのでしょうか？
教えて下さい。よろしくお願いします。
コメントありがとうございます！
両サイドに矢印を付けるのは不可能ではないですが
ちょっと複雑になるので簡単にはいかないかもです。。。
ちょうどこのループスライダーの
バージョンアップ版を作ってみようかと考えていたところなので
また完成したらサンプルの紹介をさせていただきます。
※今のところ来週(12月第3週)公開予定です。。
よろしくお願いします。
待ってます！！
jQueryでの画像などのコンテンツ要素ループスライダーの改良版 | BlackFlag | 2011.12.14 10:45
[...] 以前に「jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法」 と題して、コンテンツ要素が無限ループするコンテンツオートスライダーの紹介 [...]
初めまして。タイムリーに必要な動きで、大変有り難いです。
是非使用させて頂きたいのですが、画像のサイズが数種類あった場合、
一番最後の画像の後に空白が出来てしまいます。
画像サイズがすべて同じでなくても、空白無くキレイにスライドすることは
可能でしょうか….？
どうぞ宜しくお願い致します。
＞meiさん
コメントありがとうございます！
ここで紹介しているサンプルでは
同じサイズの画像（＜li＞）を対象にして作成していましたが
異なるサイズのものを使用する場合は
スクリプトの＜ul＞の全体幅の取得方法が変わります。
異なるサイズの画像を同じ様にループさせるサンプルを用意してみましたので、
下記のURLからダウンロードしてご確認いただけますか。
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDifferListwidth.zip
この記事で紹介しているスクリプト内の
＜ul＞の幅を取得している
—————————————————–
var listWidth = $(‘#loopslider_wrap’).children(‘ul’).children(‘li’).width();
var listCount = $(‘#loopslider_wrap’).children(‘ul’).children(‘li’).length;
var loopWidth = (listWidth)*(listCount);
—————————————————–
あたりを削除して、それ以後の構成を変更してあります。
CSSでの指定についても、
＜li＞のwidthは指定しない構成になっています。
データをご確認いただき、
また不明な点がありましたら
ご連絡くださいませ。
よろしくお願いします。
なりました！なりました！ありがとうございます！！
jQuery初心者なもので….すごく感動しました！
実はtoggleというのを使って、
表示されたコンテンツ内にこのループスライダーを使用させて頂こうと思い試してみたのですが、
ボタンクリック後表示されるページに、最初にCSSでdisplay: none;を指定しているせいか、
ページが表示されたあとにスライドが表示されないという結果になってしまいました….。
現在他の方法で自分の理想に近い動きになるよう模索中です。
こちらのスライダーは是非使用させて頂きたいと思います！！
ご対応ありがとうございました！！
＞meiさん
思い通りの動作になったようで安心しました！
toggleを使って実装する場合、
今のスクリプト構成はページロード時に実行される為に
要素が「display:none」になっていると実行されないことになります。
toggleなどを使う時は、
クリック時にスクリプトが実行するように
functionを使えば動作すると思います！
また何か分からないことがあったら
ご連絡ください！
素晴らしいjqueryですね。
非常に参考になります。
ところで一点、どうしてもわからない部分がございまして、、
var loopsliderWidth = $(this).width();
これらの部分を、
var listwidth = 250;//１枚の画像の幅
var listheight = 327;画像の高さ
var listLength = 5;//画像の枚数
var loopwidth = listwidth * listLength;
このような形で組んでいまして、
あとは同じようにやっているのですが、
ループしない状態です。
クローンはできているのですが。。。
一応今のjsを下記に表示しておきます。
なぜだか考えているのですがわからず、
ご教示いただければ幸いです。
どうぞ宜しくお願い致します。
$(function(){
$(“#slideshow”).each(function(){
$(“#slideshow .slider”).wrapAll(”)
var listwidth = 250;
var listheight = 327;
var listLength = 5;
var loopwidth = listwidth * listLength;
$(“#slideWrap”).css({
‘width’: ((loopwidth) * 2),
‘height’ : listheight,
‘overflow’ : ‘hidden’,
‘position’ : ‘absolute’,
‘top’:0,
‘left’:0
})
$(“#slideWrap .slider”).css({
‘width’: loopwidth
})
loopslider();
function loopslider(){
$(‘#slideWrap’).css({left:’0′})
var $width = $(“#slideWrap”).stop().animate({left: ‘-’ + loopwidth + ‘px’ } , 10000 , ‘linear’);
}
setTimeout(function(){
loopslider();
},10000);
$(‘#slideWrap ul.slider’).clone().appendTo(‘#slideWrap’);
});
});
すみません先ほどの問題解決致しました。。。
また失礼いたします。
あのeach()を使用していらっしゃると思うのですが、
なぜ使用しているのでしょうか。
一応文中の最初、
$(‘#loopslider’).each(function(){}
これがなくても動作はするのですが、
何か意図がございますでしょうか。
ご返答お待ちしております。
宜しくお願い致します。
＞yukiさん
このスライダースクリプトをご活用いただいているようで
ありがとうございます。
ご質問頂きました「.each(function()」の部分は
基準となるIDを作ってそこから「.children()」など子要素を辿ったりする為と
仮にスライダーの実装しないページでこのスクリプトが読み込まれた際などにも
基準としているIDがそのページ内に存在しなければ、その先のスクリプトも実行されないので
スクリプトエラーなどが発生しないようにするための意味合いも含んでいます。
スクリプト構成を変更して「.each(function()」の
大枠が無くても動作するようになっていれば
特に重要なものでもないので
その都度削除していただいても問題ないかと思います。
よろしくお願いします。
すいません。。
マウスを置くと画像が止まるにはどうしたらいいですか？
＞ゆーたさん
コメントありがとうございます。
マウスオーバーでストップさせる動作に関しては、
当ブログの別記事の
————————————————-
jQueryでの画像などのコンテンツ要素ループスライダーの改良版
http://black-flag.net/jquery/20111214-3623.html
————————————————-
で同じような動作を紹介しておりますので
そちらをご参照してみてくだい。
よろしくお願いします。
はじめまして。
ループスライダー、現在使わせていただこうかと思っているところです。
ところで パラメーターを変更することで
反対への回転（左から右へ）を行えるのでしょうか？
＞hgさん
コメントありがとうございます。
ご質問頂きました反対へのスライドの件ですが
スクリプトの30、31行目の
———————————————————————
$(‘#loopslider_wrap’).css({left:’0′});
$(‘#loopslider_wrap’).stop().animate({left:’-’ + (loopWidth) + ‘px’},25000,’linear’);
———————————————————————
の２行を
———————————————————————
var wrapWidth = $(‘#loopslider_wrap’).width();
$(‘#loopslider_wrap’).css({left:’-’ + ((wrapWidth) / 2) + ‘px’});
$(‘#loopslider_wrap’).stop().animate({left:’0′},25000,’linear’);
———————————————————————
このようにに書き換えて、
37行目の
———————————————————————
$(‘#loopslider_wrap ul’).clone().appendTo(‘#loopslider_wrap’);
———————————————————————
を
———————————————————————
$(‘#loopslider_wrap ul’).clone().prependTo(‘#loopslider_wrap’);
———————————————————————
と書き換えることで逆スライドが実現できるかと思います。
参考までにサンプルも用意しましたので
必要あれば下記のURLからダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderReverse.zip
よろしくお願いします。
BlackFlagさん
ご回答ありがとうございました。
さっそく試させていただきます。
サンプルもありがとうございます。
ループスライダーいいですね＾＾
ひとつ問題がありまして、『ajaxの処理に時間がかかるため・・・』とIE９、firefoxともにブラウザが固まってしまいます。
JavaScriptは素人故、何が原因かすらわかりません。
よろしくお願いします。
＞mojiさん
コメントありがとうございます。
こちらではご連絡いただいたようなエラーが発生することがあまりなく
原因は不明なのですが、実装したページ内で他のJS動作が実行している場合は
その影響でエラーが起きる可能性があるかと思っています。
今度もっと軽量バージョンでのループスライダーも制作を
試みてみますので出来次第（いつになるかわかりませんが・・・）
またここで紹介させていただきます。
よろしくお願いします。
ループスライダー、是非使わせていただきたく
私なりにカスタマイズしていたのですが、
画像と画像の間に余白を入れようとmarginを指定すると
一番最後の画像の後に空白が出来てしまいます。
こちら対処法などありましたら教えて頂ければと思います。
宜しくお願い致します。
＞peroさん
コメントありがとうございます。
このループスライダーのスクリプトをご活用いただいているようで
嬉しく思っております。
画像間の余白についてですが
リスト＜li＞にmarginを指定すると
もろもろの計算が狂ってしまう仕様になっているので
リスト＜li＞にはmarginを含めた幅を指定して
中の要素で余白を作るなどして調整してみてください。
例として、
画像の幅が100pxで左右に余白10pxを空ける場合は
リスト＜li＞の幅を110pxにして
中の要素を左寄せにすれば、右に10pxの余白が作れます。
この様な感じでお試しください。
よろしくお願いします。
BlackFlag様、
早々のご回答ありがとうございました。
そのようにしてみたところ綺麗にできました。
本当にありがとうございます。
＞peroさん
ご返信ありがとうございます。
無事に理想どおりの動作が実装できた様で安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして、
左から右へのスライドはサンプルを見てわかったのですが
「右から左へ」と「左から右へ」のスライドを混在させると
どちらか一方が消え、もう片方は動きません。
IDは各々分け、CSSもそれにあわせてます。
こちら対処法などありましたら教えて頂ければと思います。
宜しくお願い致します。
＞tomotomoさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきましたページ内に複数設置して
それぞれ左右別々の動作をさせる件についてですが
このループスライダーに関しては同様の要望が多かったこともありましたので
改訂版を用意させていただきました。
下記URLよりサンプルをダウンロードしてみてください。
・ループスライダー改訂版
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUAL.zip
対象要素をclassベースとして、
1ページ内に複数設置を可能とし、
左右のループ動作はrel属性を使って
どちらに移動させるか選択できるように改修してあります。
スクリプト開始部分にある
————————————-
var $setElm = $(‘.loopslider’);
————————————-
が対象となるclassの指定になります。
左右のスライド移動選択については
HTMLソース側で動作させる要素に対して
rel属性を使って
————————————-
左移動の際には「loopleft」
右移動の際には「loopright」
————————————-
と指定することで選択可能となっています。
サンプルHTMLでも1ページ内に
ループスライダーの動作を複数設置してあります。
スクリプトおよびCSSなどご確認いただき
設置の方お試しください。
よろしくお願いします。
BlackFlag様、
早々のご回答ありがとうございます。
お忙しいところ、
サンプルまで作って頂き
本当にありがとう御座います。
公開前なので今はお見せ出来ませんが
クライアント様が喜んで頂けるものが出来そうです
本当に本当にありがとう御座います。
＞tomotomoさん
お返事ありがとうございました。
無事に理想の動作が実装できそうで安心致しました。
他にもいろいろなスクリプトを掲載しておりますので
あれこれ試してみていただけると幸いです。
よろしくお願いします。
はじめまして。
まさに求めていたスライダーが見つかって喜んでおります。
しかし、思った通りに動きません。
１０個の画像が全部流れてから（左へと消えていき）、全部消えてからまた最初に戻ります。
このページの上部にある、猫ちゃんのスライドは、ちゃんとシームレスで無限ループしていることを
確認しております。
実装方法として、何が悪いのでしょうか？ （涙目）
よろしければ、ご教授いただけないでしょうか。
＞nzkoboさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件確認させていただきましたが
恐らくなのですがCSSのブラウザリセットが行われていないせいかと考えられます。
コンテンツスライダーを実装しているページの
CSS内に
———————————
*{
margin: 0;
padding: 0;
}
———————————
を追加していただくことで
解消されるのではないかと思います。
お試しください。
よろしくお願いします。
BlackFlagさま！
ご返信ありがとうございました。
お陰で無事、実装に成功しました！！
目指していた結果を得られて、非常に喜んでおります！
今回は、まことにありがとうございました
＞nzkoboさん
お返事ありがとうございました。
無事に問題が解消されて
理想の動作が実装できた様で安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
BlackFlag様
はじめまして。素敵なスライダー活用させていただいております。
1点不明点がございまして、質問になります。
Win Vista IE8での表示時の動作にて、スライドするのですが、「ズズズ」という感じでスムーズにスクロールしないのです。
※IE7、IE8互換表示、Fire Fox、Safari等ではスムーズにスクロールしております。表現が分かりづらく申し訳ございません！
原因が分かりますでしょうか？
ご教授いただければ幸いです。
宜しくお願いいたします！
＞nyoronさん
コメントありがとうございます。
このループスライダースクリプトを
ご活用いただいているようで嬉しく思っております。
ご質問頂きましたWindowsVistaでの動作についてですが
申し訳ありませんが同じ動作環境で確認できるものがなく
検証なども出来ない状態でおります。。
おそらく動作の負荷による原因かと思われますが
jQueryを最新のバージョン1.8系を使ってみるなどして
お試しいただけますでしょうか。。
よろしくお願いします。
BlackFlag様
はじめまして、BlackFlag様のソースをよく使わせて頂いております。
・ループスライダー改訂版
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUAL.zip
ソースを使わせて頂こうと思いまして
こちらのソースについて一つ質問があります。
1列目のループスライダー
と
2列目のループスライダー
の高さをそれぞれ別の高さで設定し無限ループさせることは可能でしょうか？
すみませんが宜しくお願い致します。
＞imemomomさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
嬉しく思っております。
ご質問頂きました高さの違うスライダーを配置する件ですが
高さについてはCSSで指定したものをスクリプト上で読んでいるので
スライダーを囲う要素に対してそれぞれクラスを指定して
CSSで高さの値を変えることで実現できるかと思っております。
参考までにサンプルファイルを用意しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUALDifferHeight.zip
よろしくお願いします。
BlackFlag様
返信が遅れまして誠に申し訳ございません。
サンプルまで作って頂き、ありがとうございます。
こちらのサンプルを参考にしまして、思い通りの結果となりました。
本当にありがとうございました！
BlackFlag様
先日はサンプルまで作って頂きありがとうございました。
大変申し訳ないのですが二点教えて頂きたいことがございまして
・ループスライダー改訂版
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUAL.zip
こちらの1段目に画像、2段目にテキストを打ち
1段目の画像の幅を個別に指定し
2段目のテキストの幅を指定、または1段目の画像と連動する形にする
以上二点なのですが、変更することは可能でしょうか？
すみませんがよろしくお願いします。
＞imemomomさん
ご確認ありがとうございます。
理想の動作に近づいた様でよかったです。
再度ご質問いただきました件ですが
実装されようとしている状態がどのようなものなのか
ちょっと把握できない状態でおりますが
2段でスライダーを配置するというよりかは
１つのスライダーの＜li＞の中で
画像とテキストをCSSでレイアウトを調整すれば可能なのではないかと思っております。
お試しください。
よろしくお願いします。
縦方向へは無理ですよね。もしそういうオプションの開発計画があれば教えていただければ助かります。
＞sueさん
縦方向については
———————————————————
・jQueryでの画像などのコンテンツ要素ループスライダーの改良版
http://black-flag.net/jquery/20111214-3623.html
———————————————————
こちらのパターンであれば
コメント欄に縦スライドのサンプルファイルをリンクしてありますので
宜しければご参照ください。
いつもお世話になっております。javascriptを勉強中の者で、いつも参考にさせて頂いてます。本当にありがとうございます！
大変恐縮なのですがよろしければ質問させてください。
ループ中の各画像にマウスをのせたときに、その画像が少し拡大するような動きは可能でしょうか？
マウスをのせたときに、その画像の左右の画像に重なる形（または、左右の画像と重ならず、その分単に大きくなるでもいいのですが）で、130px × 130px 程度に拡大できれば良いなぁと思っております。
何かそのような動きが実装できる方法がありましたらご教授頂ければ幸いです！
宜しくお願いします。
＞ninoさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
＜li＞に「position:relative」を追加して
中に入る画像を「position:absolute」の絶対値指定での構成にして
jQueryのhover制御で画像を拡大させる指定を追加することで
実現させることは可能かと思っております。
お試しください。
よろしくお願いします。
初めまして。こちらのサンプルを使わせて頂きたいと考えてますが、1点質問させてください。
この
＜li＞＜a href=”#”＞＜img src=”img/photo01.jpg” width=”100″ height=”100″ alt=”" />＜/a＞＜/li＞
＜li＞＜a href=”#”＞＜img src=”img/photo02.jpg” width=”100″ height=”100″ alt=”" />＜/a＞＜/li＞
＜li＞＜a href=”#”＞＜img src=”img/photo03.jpg” width=”100″ height=”100″ alt=”" />＜/a＞＜/li＞
画像を順番通りではなくランダムで画像を並べる事は出来ませんでしょうか？
通常であれば
photo01.jpg←photo02.jpg←photo03.jpg
と表示されますが、リロードするたびに
photo0３.jpg←photo01.jpg←photo02.jpg
photo03.jpg←photo02.jpg←photo01.jpg
など画像の並びをランダムで並べてスクロールできたらいいなーと思ってます。
ご教授頂ければと思います。
お手数をおかけしますが、よろしくお願い致します。
＞そらさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
ランダム表示に関してはあまりここでも紹介していませんが
——————————————————
・jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】
http://black-flag.net/jquery/20120919-4168.html
——————————————————
こちらの記事でランダム表示の方法は少し紹介させていただいておりますので
ご参考にしていただければと思います。
またランダム方法のスクリプトサンプルなどができましたら
紹介させていただきます。
よろしくお願いします。
はじめまして。いつも丁寧で親切な解説と対応に感嘆しています！ありがとうございます。
おひとつ質問させてください。
・ループスライダー改訂版
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUAL.zip
こちらのループスライダーなのですが、画像の幅をそれぞれ異なるものを使用し、二行に分けてそれぞれ左右に流したいと考えております。
試してみたところ、画像の最後尾に大きな空白が作成されてしまいます…。
自分でもいろいろ奮闘してみたのですが、おそらくulの幅の取得の関係だと思うのですが、自分で組み替えるには手も足も出ません…。
お忙しいとは存じますが、お知恵を拝借できればと思います。
ご返答お待ちしております。
お世話になっております。
少し動きのあるサイトにしたくて、いろいろ検索しましたとこと貴サイトにたどり着きました。
商用サイトのトップページと各インデックスページに使用させていただきました。
ありがとうございます。
質問が2つございます。
1、「改定版無限ループスライダー」ですが、左右の矢印（？）が文字化けします
2、スライダーの流れる時間をもう少しゆっくりするには、どこを変更すればよろしいでしょうか？
申し訳ございませんが、よろしくお願いいたします。
お世話になっております。
さきほど、「改定版無限ループスライダー」の文字化けの件で質問しました。
私の初歩的なミスでした。
解決しました。
2つ目の質問の
「スライダーの流れる時間をもう少しゆっくりするには、どこを変更すればよろしいでしょうか？」のみ、
問い合わせいたします。
＞コタニさん
コメントありがとうございます。
このループスライダースクリプトをご活用頂いている様で
嬉しく思っております。
ご質問いただいた異なる幅での複数設置に関しては
スクリプト開始にあるCSSクラス指定箇所を
———————————————–
var $setElm = $(‘.loopslider1,.loopslider2’);
———————————————–
この様に2つセットして、
それぞれCSSで別々の幅を指定することで
可能になるのではないかと思っております。
試しに変更してみたサンプルも用意しましたので
必要あれば下記よりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSlider/jQueryLoopSliderDUAL2.zip
よろしくお願いします。
＞selectitさん
コメントありがとうございます。
ループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
左右の矢印の表示が文字化けするのは恐らく
スクリプトが書かれているファイルの文字コードが「Shift-JIS」なのではないかと思っております。
文字コードを「UTF-8」に変更するか、
スクリプト内にある「≪」「≫」の部分を全角ではない別のものに書き換えてみてください。
スライダー時間については記事内に書いてある通り
変更することはちょっと難しい仕様になっております。
またそれらを実現できるパターンが用意できましたら
ここで紹介させていただきます。
よろしくお願いします。
＞BlackFlagさん
ご丁寧な回答とご説明、本当にありがとうございました。
サンプルまで作っていただいて感動しました。
自力で書くにはまだまだまだまだほど遠いですが、勉強になりました。
いい作品ができるように頑張ります。
はじめまして
とても親切で分かりやすい記事、ありがとうございます。
大変参考になり助かっております。
ひとつ、質問させてください。
並べた画像を一直線（一律の高さ）ではなく
画像ごとに上下にマージンを入れることは可能でしょうか。
見た目に、画像をジグザグに並べて、それをスライドさせていと思っています。
具体的には、壁紙に額（絵画）が飾ってあるようなデザインにして、
その額を流れるように移動させることはできないかと考えております。
お忙しいところお手数をおかけしますが
お返事いただければ大変嬉しいです。
どうぞよろしくお願いします。
＞chacoさん
コメントありがとうございます。
このスライダースクリプトをご活用いただいている様で嬉しく思っております。
ご質問いただいた件についてですが
当記事のスクリプトでは流れるリストの高さの値は
スライド動作自体には影響しないので
その様な構成で構築する際には
一番高さが大きいものの値を＜li＞の基準として
その＜li＞の中に入る要素は全て上下中央寄せになるように
CSSもしくは別スクリプトで制御する形で実現できるかと思っております。
お試しください。
よろしくお願いします。
＞BlackFlagさん
ご返答どうもありがとうございます。
ご説明いただいた通り、CSSで調整して作成してみたいと思います。
お忙しい中、いきなりの質問にご返答いただき、
本当にありがとうございました。
とても助かりました。
大変お世話になっております。
とてもわかりやすく、まだ勉強したての私でも実装することが出来ました！
ありがとうございます。
質問なのですが、
ループするのを一枚一枚止める（一枚の画像が真ん中に来たら一時停止してまた動き出す）
ことは出来るのでしょうか？
かつ真ん中に来ている画像の外（他の画像が少し見えている部分）を少し暗くする
ことは出来るのでしょうか？
それとも別物になってしまうのでしょうか。。。
ぜんぜんわからないことだらけで、聞き方すらままなっていないかもしれず
申し訳ないのですが、お手隙の際にご確認頂けたら幸いです。
お忙しい中恐縮ですが、お返事頂けると嬉しいです。
＞yukiさん
コメントありがとうございます。
このループスライダーをご活用いただいているようで嬉しく思っております。
ご質問いただきました件についてですが
このスクリプトではその様な動作については
想定していないので実現は厳しいかと思っております。。。
当ブログの別記事になりますが
———————————————–
・jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験
http://black-flag.net/jquery/20121219-4407.html
———————————————–
こちらの記事の動作が理想の動作に少し近いようにも感じており、
表示する画像を小さくすることで同じような形状の動作が実現できるのではないかと思っております。
仕様等について、
一度確認してみてください。
よろしくお願いします。
会社のホームページの担当をしていますが、ループスライダーに感激しています。
まさに欲しかった機能です。
それで、早速使わせていただこうを画像を流したい場所にコードを書き込んだのですが・・・
ページの一番上の部分に右端から左端まで全体に流れてしまいます。
サンプルの猫の画像のように、ページの真ん中辺りに配置するには何か変更しなければならない箇所があるのでしょうか？
＜TABLE＞
＜TR＞
＜TD＞
ここに◆HTML
＜div id=”loopslider”＞
を書き込んでいます。
＜/TD＞
＜TR＞
＜/TABLE＞
ホームページ初心者でスミマセン。
どうかご教授いただきますよう、よろしくお願いします。
＞haluさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実装したページでのHTMLとCSS構成が
どのようなかたちになっているのか不明なのですが
当記事サンプルのCSSをひとまずそのまま組み込んでいただければ
幅は目いっぱいにならずに500pxになるかと思われます。
実装されているHTMLはTABLEで構成されているようなので
CSSでTABLEの幅をきちんと指定を加えてみていただければと思っております。
お試しください。
よろしくお願いします。
BlackFlag 様
ありがとうございました。
まだまだ未熟者でもう少し研究してみます。
はじめまして Jquery初心者のmieと申します。
只今ネットショップページを制作中でループスライダーを探していた所BLACKFLAG様のこちらのページにたどり着きました。
早速コピペさせていただきましたが最後の１０個目の画像と次の１番目の画像が繋がりませんので 申し訳ありませんがお時間のある時にでもご指導下さい。
使用環境はネットショップオーナー４を使っています。CSSは別ファイル読み込みで書きましたが、HTMLはネットショップソフトのシステムの関係上＜body＞から＜/body＞の間にしか書くことが出来ないので 実際に動作を実行させるスクリプトは＜body＞と＜div id=”loopslider”＞の間に入れました。
ｃｓｓでは全体のサイズを800ｘ200 写真のサイズを200×200 にしてスライダー速度の値を30000にしてあります。
宜しくお願い致します。
＞mieさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
実際どのような全体構成で実装されているか
確認できていないので何とも言えないところもあるのですが
おそらくブラウザリセットが
きちんとされていないのかな、と思われますので
CSSに
———————————-
#loopslider * {
margin: 0;
padding: 0;
}
———————————-
とした記述を追加していただければ
解消される可能性があるのではないかと思われます。
お試しください。
よろしくお願いします。
初めまして。
ちょうど求めていた機能とループスライダーが合致したため、有り難く利用させて戴いております。
1点質問させて戴きたくコメント致します。
ループスライダーを幅100%で表示させますと、2周目あたりから画像が消えてしまいます。
スクロールバーを動かしたり少し時間が経つと表示されます。
もしこの現象の解消方法がありましたらご教示戴けないでしょうか。
何卒宜しくお願い致します。
BlackFlag様
大変助かりました。すぐに解消できました。
感謝しております ありがとうございました。
mie
＞mieさん
ご連絡ありがとうございました。
無事に理想通りの動作が実装できたようで
安心しております。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
＞repさん
コメントありがとうございます。
このループスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただきました件についてですが
もともと幅100%のような幅広での実装想定はしておりませんでしたが
こちらでもサンプルファイルを元にやってみたところ
仰られているような現象は起こりませんでした。
当記事でダウンロードできるサンプルファイルでも
同様の事象は起こりますでしょうか？
ループスライドさせる＜ul＞は
もとの＜ul＞を複製させて、リストの前後に追加し
合計3つの＜ul＞リストを生成してスライドさせる構成になっていますので
幅広にした上でスライドさせる要素が少ない場合は
余白が表示されることがあるかもしれませんが
その様な場合は全体構成等についてご検討いただければと思っております。
よろしくお願いします。
BlackFlag様
ご返答を有難うございます。
サンプルファイルの#containerと#loopsliderをwidth:100%;にしたところ、同様の現象が起こりました。初めは暫く正常に流れるのですが、時間が経つと一部の画像が消えてしまいました。(消えてまた暫くすると表示されます)
また、スライドさせる要素の数を倍にしてみましたが解消されませんでした。
Firefox21 Chrome27 IE10 で確認しました。
度々で恐縮ですが、何卒宜しくお願い致します。
＞repさん
ご確認ありがとうございます。
仰られている現象とこちらの思っている現象との
認識に違いがあるのかもしれませんが
全体構成については
先日コメントさせていただいた通りとなっておりますので
そこに沿わない（幅広の100%など）構成での実装は
このスクリプトでは厳しいのかなと思っております。
ご期待に沿えず申し訳ありませんが
別のスクリプトでご実装された方が早いかもしれません。。
よろしくお願いします。
BlackFlag様
ご返答有難うございます。
やはり、幅100%は想定されていないため厳しいのですね。
固定幅で必要な時は是非利用させて戴きます。
この度は調査のお時間を取らせてしまい恐縮です。
有難うございました。
はじめまして。
理想の動きを実現できました♪
そこでひとつ質問です。
上の質問でマウスオーバーで画像がストップする方法を訪ねられていて改良版にストップするときのjqueryが記載されてるとの事でしたが、左右の動きの変化などなしでマウスオーバーで画像がストップするには、この上のjqueryプラグラムに何を追記すればいいでしょうか？
よろしくお願いします。
＞Yoheiさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
当記事で紹介しているスクリプト構成では
マウスオーバーでストップさせるのは難しいので
改訂版の方を使用していただき、
左右の動きが必要ない場合は
CSSで左右のボタンを「display:block」などで
非表示していただく形で実装していただくのはいかがでしょうか。
ご確認ください。
よろしくお願いします。
はじめまして、jQuery LOOPSLIDER【SAMPLE】を使用させて頂いてます。
ありがとうございます。
さて、このプログラムですが、ワードプレスでの実装も可能でしょうか？
ワードプレスに組み込んでますが、動かなくて苦しんでます。
ご指導よろしくお願い致します。
＞miyabiさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
基本的にはWordPressに実装する場合も
特にスクリプトは変更することなく組み込むことは可能です。
実際のご実装されているページを
確認できていないので何とも言えないのですが
スクリプトやCSSファイルを組み込む際の
ファイルパスなど確認してみてください。
よろしくお願いします。
BlackFlag様
ループスライダーを使おうと思い色々とカスタマイズをしようとしています。
上手くいかない所がある為、教えて頂けると助かります。
画像と画像の間に余白を入れようと思っています。
過去ログの
peroさん | 2012.09.27 10:41
と同じ内容になりますが、
—————————————
画像間の余白についてですが
リスト＜li＞にmarginを指定すると
もろもろの計算が狂ってしまう仕様になっているので
リスト＜li＞にはmarginを含めた幅を指定して
中の要素で余白を作るなどして調整してみてください。
例として、
画像の幅が100pxで左右に余白10pxを空ける場合は
リスト＜li＞の幅を110pxにして
中の要素を左寄せにすれば、右に10pxの余白が作れます。
—————————————–
こちらを試した所、dreamweaver 上では、
きちんと余白が出来ている状態でループするのですが、
dreamweaverを使いブラウザで確認をすると、
余白が反映されていない状態です。
もしかしたら私の勘違いで
「中の要素を左寄せにすれば右に10pxの余白が作れます。」
というのが上手く出来ていないのかもしれません。
この中の要素というのはCSS のどのクラスに該当するのでしょうか？
それともう一つだけ質問させてください。
画像の下に作品名などを入れたいと思い、
＜a href=”#” rel=”nofollow”＞こんにちは＜/a＞
のようにしたのですが、
この場合も dreamweaver上では画像下に「こんにちは」当表示されますが
ブラウザでの確認を行うと消えてしまいます。
もしよろしければ、よろしくお願い致します。
＞hirokoさん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
実際に組み込まれているものを確認できていないので
何とも言えないのですが
当記事で紹介しているスクリプトは
Dreamweaverで組み込んだからといって
特に何かが変わる、ということはないと思っております。
他のところで使用しているCSSが影響してしまって
動作に支障をきたすことも考えられますので
実際にサイトに組み込みながカスタマイズするのではなく
当記事でダウンロードできるサンプルファイルを
カスタマイズして理想の動作の形にしてから
実際のサイトデータに実装してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法 « the end of site | 2013.07.31 8:27
[...] http://black-flag.net/jquery/20110707-3305.html Share this:TwitterFacebookTumblrGoogle +1いいね:いいね 読み込み中… カテゴリー: WEB パーマリンク [...]
はじめまして、いつも参考にさせていただいております。
早速なのですが、一つ質問させてくださいませ。
上記コメント欄無いにありました、
幅の違う画像を並べてループさせるプラグインを使用させて頂いているのですが、
何故かプラグインを挿入すると、画面に横スクロールが発生してしまいます。
overflow:hiddenがうまく効いていないのか、
（#loopslider /#loopslider ul /#loopslider ul liすべてに記述しております）
原因がいまいち分からず苦戦しております。。
CSS ===========
#loopslider * {
margin: 0;
padding: 0;
}
#loopslider {
width: 1000px;
height: 446px;
margin: 0 auto;
padding-bottom: 47px;
text-align: left;
position: relative;
overflow: hidden;
}
#loopslider ul {
height: 446px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider ul li {
height: 446px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider ul li img{
margin-right: 1px;
}
HTML========
ご多忙とは存じますが、なにか策がありましたらご教授くださいませ。
よろしくお願い致します。
＞質問させてください。さん
コメントありがとうございます。
このループスライダーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
スライダー以外のところで指定しているCSSが
影響していることも考えられるので
実際の実装されている各構成を確認できないと
何とも言えない状態です。。
可能であれば実装されているテストURLなど
お知らせくださいませ。
よろしくお願いします。
お世話になっております。
まったく同じ動きをスマホでやりたいと考えていますが、その場合は難しいでしょうか？
現在制作しているスマホページでどうしてもループスライダーにしたい箇所がありまして。。
＞ゆうさん
コメントありがとうございます。
このループスライダースクリプトをご検討いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
当スクリプト制作時はスマホでの動作は想定しておりませんでしたが
現在私のiPhone5sで確認する限る動作しているようですが
スマホ向けに構成されているものではないので
端末によっては動作が重くなるかもしれません。。
スマホにも対応させた軽量スクリプトを作ることができましたら
またここで紹介させていただきます。
よろしくお願いします。
はじめまして。
ループスライダー組み込みページを作成して動きだして感激しています。
ところで組込みページの壁紙を設定したいのですが、どこをさわればよろしいでしょうか？
ｃｓｓを色々変更しても変わらないのでご教示ください。
＞たかみさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました壁紙設定の件についてですが
ページの全体背景ということでよろしいでしょうか。
CSSでbodyに対してbackground指定をすることで
ページ全体の背景色もしくは背景画像を指定することが可能ですので
お試しください。
よろしくお願いします。
いつも勉強になっております。
サムネイル付スライドショウーと、このループを合体して、ループ中の任意の画像をクリックすると、スライドショーの画像が替わる仕様を考えていたのですが、どうにも思った通りの動作が実現できません。
ループするのに自動でコピーされるul.liなどが、どうやらスライドショウー側のスクリプトに反応していないようです。
無限ループしながら、サムネイルクリックでスライドショーする方法が可能なら、ご教授くださいませんでしょうか？
よろしくお願い致します。
ループスライダーギャラリーの導入 | 天城スタジオ | 2014.01.31 5:36
[...] jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法 [...]
＞天城スタジオさん
コメントありがとうございます。
このコンテンツスライダーを使って
色々とご検討いただいている様で嬉しく思っております。
ご質問いただいた件についてですが
当ブログで紹介しているスライドショーは
基本的に切り替える画像とサムネイルの数を同じにする構成になっておりますので
当記事のコンテンツスライダーの様な
リストが複製される構成のものとの組み合わせは厳しいかと思っております。
ですが、サムネイルをループスライドする
スライドショーを作成することは可能ですので
またその様な構成のスライドショーが出来ましたら
ここで紹介させていただきます。
よろしくお願いします。
BlackFlag様
お返事ありがとうございます。
スクリプトについて、とても勉強になっております。
やはり複合では無理なのですね。
シンプルではないのですが、
BlackFlag様のスクリプト使って強引に「ループスライダーギャラリー」を作ってみました。
ソースは殆どコピペですが‥。
ぜひ、サムネイルをループスライドするスライドショーを作ってください。
楽しみにしております。
ランディングページで効果的な動きを演出する jQueryエフェクト７つ＋１ | LPO研究所 | 2014.03.16 2:30
[...] jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法 [...]
BlackFlag様
はじめまして。
ありがたく使わせていただこうと思います。
縦方向の物をdownloadして設置しました。
デフォルトの動きが下から上に流れるのですが、これを逆方向の「上から下」にしたくてここのコメントにあるものを参考に（左右を反対）したりして色々さわっているのですが、うまくいきません。
方向は逆の「上から下」にできたのですが、そうすると1回流れて消えてしまいます。ループされないのです。
ulが2つにはなっているようなのですが。。。
お忙しいとは存じますがご教授お願いいたします。
＞ともさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました上下移動の件についてですが
スクリプト最後（サンプルファイル97行目）にある
「.hover()」メソッドを「.on」を使っての
「hover click」の2つのアクションに変更し
その後ろ（サンプルファイル102行目あたり）に
「setTimeout」を使って時間差で「#loopup」に対して
「.click()」動作を実行させることで
上から下への動作が実装可能かと思います。
サンプルファイルも用意しましたので
必要であれば下記よりダウンロードしてみてください。
http://black-flag.net/devel/jQueryLoopSliderHoverStop/jQueryLoopSliderHoverStopVerticalDown.zip
お試しください。
よろしくお願いします。
忙しい中すみません。ホームページにこのスクリプトを使ってみようと思っているのですが、うまくいきません。
画像を５枚（サンプルと同じ大きさ）でやってみたところ最初に表示した場合はループする１グループの画像の塊が早く流れて空白ができてしまいます。また、ほかのサイトに飛んでから戻る（あるいは進む）をするとループが正常に起こっています。ページの更新では前者の空白ができる早いループができるようです。これを直したいのですがどうしたらいいのかわかりません。ブラウザはグーグルクロームです。よろしくお願いします。
＞nognogさん
コメントありがとうございます。
このコンテンツスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
当記事のサンプルファイルで確認してみる限り
画像を5枚にしたとしても同様の現象は起こりませんでした。
当記事でダウンロードできるサンプルファイルを使っていろいろと試していただき
正常に動作することが確認できたら
そのまま実装されるHTML内に入れ込む流れでやってみてはいかがでしょうか。
お試しください。
よろしくお願いします。
はじめまして。
ぜひBlackFlag様のループスライダーを使わせていただきたいと思っているのですが、つまずいてしまいましたのでご教授いただければと思います。
ワードプレスで組み込みをしているのですが、10枚の猫の写真が横に動くまではできたのですが、２周目からは１グループ目が左に消えてからループされるため、２周目までに空白ができてしまいます。
先に似たような質問をされている方のを参考にし、”ブラウザのリセット”というものを確認したのですが、ワードプレスに既に表記されており…他に何をしたら解決できるのか、わかりましたらご教授いただければと思います。
お時間ありますときにご返答いただけますと幸いです。
何卒よろしくお願いいたします。
＞yokozkさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
実際の実装されているHTMLやCSSの各構成を確認できないと
何とも言えない状態ですが
CSSに
—————————
#loopslider,
#loopslider * {
margin: 0;
padding: 0;
}
—————————
この記述を追加しても改善されない場合には
他に使用しているプラグインか何かが
影響してしまっているものかと思われますので
サイト内で使用しているプラグインを一つひとつ切ってみて、
どの動作が影響しているか探ってみる必要があるかとも思っております。
よろしくお願いします。
ホームページ作成にわたり
理想の動きなので是非参考にさせていただきたいのですが
私の知識があまりになく
初歩的なところで行き詰っております。
上記のサンプルのように
右からの動きはできたのですが
ループスライダー改訂版を参考にし
同ページにて左からも動くようにしたいです。
上記に記載されています
CSSやHTMLと改訂版では
どこの箇所を変更になってるのでしょうか？
ループスライダー改訂版のファイルも貼って頂いているのに
このような質問で申し訳ございませんが
よろしくお願いいたします。
＞dachanさん
コメントありがとうございます。
当記事のループスライダースクリプトの使用をご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
HTMLとCSSの記述に関してはさほど量が多くないと思いますので
それぞれのファイルを比較してどの部分が違うか
見比べてみていただければと思っております。
よろしくお願いします。
はじめまして、BlackFlag様のループスライダー（loopsliderDUAL)を使用させて頂こうと思いますが、ページを開いた直後に動きを開始せず、何秒後かに開始するように設定するにはどうすれば宜しいでしょうか？
ご指導宜しくお願い致します。
＞miyabiさん
コメントありがとうございます。
当記事のループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
スクリプトの実行を遅らせるのは
「setTimeout」にて実現することができるので
当ブログ別記事の
・jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法
http://black-flag.net/jquery/20110405-2878.html
こちらを参考にしてみてください。
よろしくお願いします。
BlackFlag 様
ご教授有難うございました。ご返事記載されるまでに思いついたワードで検索しましたら、ご回答頂きましたページにたどり着きました。まさしく同じページでした。
又、難関で悩んでまして、御社の無限ループで 下記の動きは無理でしょうか？
「ページオープン直後に音声を流し、数秒後にスライダー開始（これは出来ました）この後なのです。
スライダー一周後にスライダー停止する。（１．これです）」
ページ更新させれば上記「」を繰り返す。（２．ボタンで機能が追加出来ればいーのですが）
すいません、ご教授頂ければ助かります。宜しくお願い致します。
＞miyabiさん
無事に実装できた様で安心致しました。
再度ご質問いただいた点につきましては
当記事のスライダーは無限ループ用として構成しておりますので
一回のスライドで停止する場合は無理にこのスクリプトを使用しようとせずに
別の構成で組んだ方がよろしいかと感じております。
（もっとシンプルなスクリプト構成でいけるかと思っております。）
よろしくお願いします。
BlackFlag様
お世話になっております。
度々こちらのブログを拝見させていただいています。
今回こちらのスライダーを使用させていただきたかったのですが、
・デフォルトではスライドなし
・左右のボタンマウスオーバーでスライド
・左右のボタンをクリックしている間はややスピードが上がる
・右端まで行くと右のボタン、左端まで行くと左のボタンがそれぞれ消え、ループはしない
こちらの実装は可能でしょうか。。
どうしても必要で今色々悩んでいるところです。。
＞ぽんたさん
コメントありがとうございます。
このコンテンツスライダーの使用をご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
その様な仕様のスライダーを作成することも可能だとは思いますが
当記事のスクリプトではその様な機能は想定しておりません。
作成するには全く違うスクリプト構成になると思いますので
またその様なスライドショーサンプルが出来ましたら
ここで紹介させていただきます。
よろしくお願いします。
始めまして
現在、Dreamweaverをかじり始めて素人なんですが
こちらのループスライダーを是非使用させて頂きたいと
本やネットを調べたんですが実装方法が解らず・・・
初心者のわたしでは無理なんでしょうか？
ご迷惑でなければ御教授願えないでしょうか？
OSX 10.92 DreamweaverCS3を使っています。
＞smileさん
コメントありがとうございます。
このコンテンツスライダーの使用をご検討いただいている様で
嬉しく思っております。
申し訳ありませんがこのコメント欄やメール等で
HTMLやCSSの基礎から教えることは少々厳しいかと思っております。
実装方法に関しては記事に書いてある通りなので
HTMLやCSSの基礎を覚えていただき、
当記事のサンプルファイルを参考にして実装いただけたらと思っております。
よろしくお願いします。
blackflag様
お世話になります。
御社のloopsliderDUALですが、スライドの速度の調整ボタンup downを表示させ、そのボタンでスライドのスピードの調整をさせることは可能でしょうか？
ご教授願えれば幸いです。
宜しくお願い致します。
＞miyabiさん
コメントありがとうございます。
このループスライダースクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
その様な形状のスライドも実現可能だと思いますが
当記事のスクリプトからでは色々とカスタマイズが必要になるかと思っております。
またそのようなサンプルができましたら
ここで紹介させていただきます。
よろしくお願いします。
お世話様です。
スクリプト使わせて頂いております。
リンク先のYouTube動画をサムネイルからFancyboxで表示したいのですが可能でしょうか。
素人なもので、お手数をおかけしますがご教授下さい。
テスト用
http://www.providence.jp/home_copy.html
現在のトップページ（Fancybox使用）
http://www.providence.jp/home.html
よろしくお願いします。
＞massanさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
Fancyboxとの併用の件ですが
当記事のスライダースクリプトが読み込まれた（実行された）後に
Fancyboxのスクリプトが実行されるようにする必要があります。
スクリプトを読み込む順番を入れ替える、
もしくはsetTimeoutなどを使って
Fancyboxの実行タイミングをずらしてみてはいかがでしょうか。
【参考】jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法
http://black-flag.net/jquery/20110405-2878.html
お試しください。
よろしくお願いします。
現在HPを作成中でねこちゃんの画像がスライドするシーンを見て興味を持ち
チャレンジしておりましたが、素人なものでサンプルどこに差し込むかが
イマイチ解らなく進みません。ＨTＭＬ、コモン等誠に申し訳ありませんが
詳しく教えて頂けないでしょうか？
ソフトはネットショップオーナー４ですので宜しくお願い申し上げます。
＞森 松文さん
コメントありがとうございます。
このループスライダーのご使用をご検討いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
大変申し訳ありませんが
このコメント欄にてHTMLとCSSとスクリプトの基礎から
解説するのは少々厳しく感じております。
基本的には当記事内に書かれている
HTMLソースの内容をHTMLファイルに
CSSセレクタの内容をCSSファイルに、
スクリプトはHTMLファイルもしくは外部ファイルにして
使用していただく形になりますので
HTMLやCSSの基礎について解説されているサイトなども参考にして
組み込んでみていただけると幸いです。
よろしくお願いします。
連絡ありがとうございます。何とか頑張ってみます！！
初めまして。
業務で画像をループさせる必要があり、検索でこちらのサイトにたどり着きスクリプトを使わせてもらっています。
どうしてもうまくいかないところがあり質問させていただきます。
コメント内にありました、画像サイズの違う場合のバージョンを使用しているのですが
opera、firefox、では大丈夫なのですが、IEでのみうまくループしてくれず困っています。
現在５枚の画像でループさせているのですが、５枚目の途中で重なるように１枚目が出てきてしまい５枚目の画像が一部見えない状態です…。
html、cssは以下のようにしています。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
＜div id=”loopslider”＞
＜ul＞
＜li＞＜img src=”01.jpg” width=”299″ height=”200″ alt=”" /＞＜/li＞
＜li＞＜img src=”02.jpg” width=”267″ height=”200″ alt=”" /＞＜/li＞
＜li＞＜img src=”03.jpg” width=”252″ height=”200″ alt=”" /＞＜/li＞
＜li＞＜img src=”04.jpg” width=”301″ height=”200″ alt=”" /＞＜/li＞
＜li＞＜img src=”05.jpg” width=”267″ height=”200″ alt=”" /＞＜/li＞
＜/ul＞
＜/div＞
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
#loopslider {
margin: 10px auto 30px auto;
width: 636px;
height: 200px;
position: relative;
overflow: hidden;
}
#loopslider ul {
height: 200px;
float: left;
display: inline;
overflow: hidden;
}
#loopslider li {
height: 200px;
float: left;
display: inline;
overflow: hidden;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ちなみにjavaScriptはまったくの初心者でhtmlとcssが多少分かる程度です。
ご教授頂ければ助かります。宜しくお願い致します。
＞Ta16さん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
実装されているHTMLやCSSの全体構成を確認させていただかないと
何とも言えないのですが、
当記事のCSSサンプル最後に記述してある
「Clearfix」の記述がきちんとCSSファイルに記載されているかどうか
まず確認してみてください。
よろしくお願いします。
BlackFlag様
ご返答ありがとうございます。
すみません自己解決しました。
IEの開発者ツールのドキュメントモードが７になっていたのが原因だったようです。
バージョンをあげたら問題なく動きました。
お手間を取らせてしまい、申しわけありませんでした。
はじめまして
クライアント様より無限ループスライドにページロード時ランダム表示という依頼があり
色々検索した結果こちらに辿り着きました。
こちらで以前同じようなことを質問されていた記事を読み全画面表示ランダムを見たのですが
それをこちらのスクリプトにどうやって組み込めばいいのか
jQuery初心者の私には全くわからなかったためご教授いただきたくコメント致しました。
こちらのスクリプトのどこにどのようにして組み込めばいいのかご教授ください。
宜しくお願い致します。
＞kiyomiさん
コメントありがとうございます。
当記事のループスライダーをご活用いただいている様で
嬉しく思っております。
リストのランダム表示に関しては別記事の
—————————————–
・jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
http://black-flag.net/jquery/20130327-4522.html
—————————————–
にて紹介させていただいております。
こちらの記事の応用編スクリプトの6～19行目がランダム表示の動作になりますので
ループスライダースクリプトの開始位置5、6行目の間に入れ込んで
ランダムにするリストの対象をループスライダーのリスト構成になるように
調整することで可能になるかと思います。
お試しください。
よろしくお願いします。
ご返答ありがとうございます。
やってみました。
出来たのですが私の説明不足で正確に伝わっておりませんでした。
申し訳ありません。
ランダムというのは順番は変えずにページをロードするたびに最初に表示される画像が違うのものになるという意味でした。
申し訳ないのですがもう一度ご教授いただけないでしょうか？
宜しくお願い致します。
＞kiyomiさん
リストの一枚目のみをランダムにするには
色々やり方はあると思いますが
————————————————-
・jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】
http://black-flag.net/jquery/20120919-4168.html
————————————————-
のランダム用スクリプトの7～14行目を
ループスライダースクリプトの開始位置5、6行目の間に入れ込んで
ランダムにする対象をbodyではなく
リストの開始行にする（もしくは開始行にIDかClassをつける）
といった調整で可能になるかと思います。
この方法だとスクリプト側から＜img＞タグを入れ込む形になるので
HTML上では開始行＜li＞の中身は空になるかと思います。
（ランダム用スクリプトの7～14行目の中で11、13行目も不要）
お試しください。
よろしくお願いします。
ご返答ありがとうございます。
やってみました。
うまく入ったのですが残念ながらこのスクリプトは連続してループされる画像の開始位置を変更する
ということでは無かったのですね。
1枚目だけがランダムになる ということだったとわかりました。
私の勘違いでした。
また、1枚目が終わるとまた元に戻ってしまいます。
12枚あるのに全部ループされませんでした。
最大枚数を12にしたのですが・・・。
こちらにあるスクリプト以外になってしまうのでループされる画像の開始位置を変更するスクリプトはご教授いただけないですよね？
ご教授いただければ嬉しいですが私の勘違いでお手間を取れせてしまし申し訳ありませんでした。
度々申し訳ありません。
私の勘違いでクライアント様は普通にランダム表示を希望していたことがわかりました。
ですので最初に教えていただいたスクリプトで大丈夫でした。
何度もすみませんでした。
ありがとうございました。
初めまして、以下のページで使わせて頂いています。
ありがとうございます！！
http://masa-fos.com/coleman2014aut/report2.html
ここまでは問題なく進んだのですが、
本当はもっと写真があるのにこれ以上映らず最初に戻ってしまうのですが、
枚数の制限などあるのでしょうか？
自分ではどうしても分からず、お忙しいところ大変申し訳ございませんが
原因が分かればどうぞ教えて下さい。
よろしくお願いいたします。
＞miyumiyuさん
コメントありがとうございます。
このループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
特に枚数制限などはありません。
記載いただいたURLを見ても
正常に動作しているようにも見えるのですが
その様な現象が起きている環境（OS・ブラウザ）は何でしょうか。
よろしくお願いします。
コメント失礼いたします！
まだまだ何も分からない初心者なのですが。
上のmiyumiyuさんのページ（http://masa-fos.com/coleman2014aut/report2.html）のように画面いっぱいに表示したい場合どうすればいいのでしょうか。
とりあえず自分で設置してみて猫のスライダーはできたのですが、これを画面いっぱいに表示する方法が分からなくて困っています。
申し訳ありませんがお教えいただくことは可能でしょうか。
＞hitoさん
コメントありがとうございます。
当記事のループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
スライダーを画面めいっぱいに広げるには
サンプルファイルの構成で言うと
CSSにて「#loopslider」に対して「width:100%;」を指定することで
可能になります。
要はスライダーを囲む要素の幅を
100%にすることで実現できるかと思います。
お試しください。
よろしくお願いします。
BlackFlag様
ご返答ありがとうございます
cssを変更してみたらページいっぱいに流すことができました。本当にありがとうございました。
しかし、「#loopslider」に対して「width:100%;」を指定してみると画像が連続的に流れなくて困っています。
１～１０枚目はスムーズに動くのですが、１０枚目が右から流れはじめると本来後ろにあるはずの１枚目の画像が表示されず、１０枚目の画像がモニターの中央にきて、やっと表示されるようになります。（モニターの大きさは１９インチです）
本来そこにあるはずだけど表示されていないのかと思い、１０枚目の後ろの１枚目の上で右クリックしてみても画像自体が見当たらないのです。
iphone5,ipadで確認してみると問題なく動くのですが、これはパソコンのせいで起こっている現象なのでしょうか？
読みづらい文章、説明力不足で申し訳ありません。
＞hitoさん
実装されているHTMLやCSSの全体構成を確認させていただかないと
何とも言えないのですが、（サンプルファイルでも同じ現象が起きているのでしょうか・・・）
CSSのブラウザリセットがきちんと行われていない可能性もありますので
確認してみていただけますでしょうか。
よろしくお願いします。
初めまして、参考にさせていただきました。
この動きの縦バージョンを作りたいのですがなかなかうまくいかなくて…
marquee.jsでひとまずは動きは出せるのですが、
一通り流れ終わったあとは少しの空白部分ができてしまい、
不自然になってしまいます。
縦の動きもこちらでできるのでしょうか？
さきほどいろいろ試してみたのですが、なかなか難しくうまくできませんでした。
よろしくお願いいたします。
＞kitamuraさん
コメントありがとうございます。
当記事のループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
縦方向については
当ブログ別記事のパターンになりますが
—————————————————–
・jQueryでの画像などのコンテンツ要素ループスライダーの改良版
http://black-flag.net/jquery/20111214-3623.html
—————————————————–
こちらのパターンであれば
コメント欄「2012.01.16 23:02」に
縦スライドのサンプルファイルをリンクしてありますので
宜しければご参照ください。
よろしくお願いします。
初めまして。いつもプログラムを使わせていただいております。
今回「無限ループスライダー」をうまく起動するように設定はできたのですが、
html内にたくさん文字が増えすぎてしまって、もっとスマートなhtmlにしたいと思い、
jsソースを外部ファイルとして置き、読みだすようにできたらと思っています。
今回の「無限ループスライダー」では、htmlを読み出したい位置に、cssはcssファイルに。
scriptを2行目から40行目までコピペして「jquery.LoopSlider.js」というjsファイルとし、
任意の場所にアップロードしました。
それを読み出すために、header内に、
＜script type=”text/javascript” src=”jquery.LoopSlider.js”＞＜/script＞
と記述したのですが、うまくいきません。これではダメですか？
jsファイルは絶対パスでリンクしています。
同じく「jQueryでレスポンシブ対応のブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験 2013/07/09」
こちらも、うまくjsソースを外部ファイル化できません。
ホントに初心者過ぎて申し訳ないような質問ですが、ご回答お願いいたします。
＞K’さん
コメントありがとうございます。
当記事のループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
スクリプトの外部ファイル化についてですが
書き出す内容はスクリプトの4行目～40行目になります。
※2行目のjQueryライブラリファイルはHTMLから読み込んでください。
HTMLのhead内は最終的には以下のような形で読み込みます。
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”＞＜/script＞
＜script type=”text/javascript” src=”jquery.LoopSlider.js”＞＜/script＞
お試しください。
よろしくお願いします。
早速のお返事ありがとうございます。
上記の通り試してみたところ、うまく動かすことが出来ました。
最終的に「”」半角のダブルクォーテーション、これが環境依存のダブルクォーテーションになっており、
それに気づかず、ずっと動かない動かない…と悩んでいたようです。
ディスプレイに近づいてよく見たら気づけたのですが…、気を受けなくてはいけないですね。
これでほかのjQueryもいろいろこなしていけそうです。
相談に乗ってくださりありがとうございました。
また悩んだ時は、質問させてください。
WEB制作に役立つ・学べるおすすめ国内ブログ厳選10個～コーディング編～ | ぶぶりんブログ | 2015.07.15 21:19
[...] スライドさせる無限ループスライダーの作成方法 http://black-flag.net/jquery/20110707-3305.html [...]
はじめまして！こちらのサイトを検索で知り、とても感動しております。
有難うございます。
実は、改訂版にて２列作成してます。
画像をクリックすると、lightbox で画像が開くようにしたいのですが、
可能でしょうか？
http://ideahacker.net/2015/02/07/9680/
やってみたところ、スライドしなくなりまして、、。
可能でしたらご指導頂けましたら嬉しいです。。
どうぞよろしくお願いします。
＞K.Erikoさん
コメントありがとうございます。
当記事のループスライダースクリプトをご活用いただいている様で
嬉しく思っております。
LightBoxの実装についてですが
当記事のスクリプトでは特にクリックアクションを使っていないので
LightBoxと組み合わせてもスクリプトに影響することなく
問題なく実装できるのではないかと思っております。
JSファイルを読み込む順番を変えてみたり
HTML構成を再度ご確認いただいてもよろしいでしょうか。
よろしくお願いします。
＞BlackFlag様
コメント有難うございます！
JSの順番を変えてみたところ、
スライドするがライトボックスが作業しない
又は、ライトボックスは作動するがスライドがしない、、、、、
という事になりました。。
いろいろ探っているところです、、。
ありがとうございます。
参考にさせていただいています。すごいですね！
早速このページに書かれていますHTMLとCSSとscriptを
そのまま試しに作成中のHPに用いさせてもらいましたところ、
1０枚目の画像がスライドで表示されたあとに、空白ができてしまいます。
10枚目が左にスライドし終わるぐらいで、1枚目が右側に出始めます。
環境はIE11とChromeと試しましたが、同じでした。
10枚目の画像のあとの1枚目が連続で表示するために
確認する箇所をご存知でしたら、教えていただきたくお願いします。
ぜひこのスライダーを利用させていただきたいと思っています。
どうぞよろしくお願いします。
先ほどお問い合わせさせていただきました。
皆さまの過去の質問のご回答にありました。
そちらで、無事解決しました！
すごいですね！これからもいろいろと勉強
させていただきます。
ありがとうございました。
＞りょうちゃんさん
コメントありがとうございます。
当記事のスクリプトをご活用いただいているようで
うれしく思っております。
問題となっていた点も解消できたようでよかったです。
他にもいろいろと紹介させていただいておりますので
あれこれお試しいただけると幸いです。
よろしくお願いします。