jQueryで自動でスライドするカルーセルパネルUIを作成する方法 2012/01/11
以前、「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題して、
jQueryを使ってのシンプルなスクリプトでカルーセルUIを実装する方法を紹介しましたが
カルーセル動作での自動でスライドするパターンの実装方法のリクエストをいただき、
以前のものをカスタマイズして、試しに作ってみたので紹介してみます。
まずは動作のサンプルから。
jQuery SIMPLE CAROUSEL AUTO SLIDE【SAMPLE】
5秒ごとにカルーセルパネルが自動でスライドします。
スライドは左右の矢印をクリックすることで動作させることも可能です。
並べられたコンテンツ要素（画像）は一つずつスライドし、
要素全体はループして表示されます。
このカルーセルパネルUIの全体構成について、
まずはHTMLから。
◆HTML <div id="carousel"> <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><!--/#carousel-->
HTMLは以前の記事のものと構成は全く変わっていません。
大枠を任意のIDで覆い（サンプルでは「#carousel」とします）、
その中に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
コンテンツ要素を増やしたり減らしたりする際は、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#carousel {
margin: 0 auto;
width: 500px;
height: 100px;
text-align: left;
position: relative;
}
#carousel_prev,
#carousel_next {
top: 0;
width: 20px;
height: 100px;
background: #000;
cursor: pointer;
position: absolute;
}
#carousel_prev {
left: -20px;
background:transparent url(../img/prev.jpg) no-repeat top left;
}
#carousel_next {
right: -20px;
background:transparent url(../img/next.jpg) no-repeat top left;
}
#carousel ul li {
width: 100px;
float: left;
display: inline;
}
/* =======================================
ClearFixElements
======================================= */
#carousel ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#carousel ul {
display: inline-block;
overflow: hidden;
}
CSSも以前の記事のものと構成は全く変わっていません。
全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となり
それぞれの値は変更が可能になっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆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(){
$('#carousel').each(function(){
var slideTime = 500;
var delayTime = 5000;
var carouselWidth = $(this).width();
var carouselHeight = $(this).height();
$(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
$(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');
$('#carousel_wrap').css({
width: (carouselWidth),
height: (carouselHeight),
position: 'relative',
overflow: 'hidden'
});
var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
var listCount = $('#carousel_move').children('ul').children('li').length;
var ulWidth = (listWidth)*(listCount);
$('#carousel_move').css({
top: '0',
left: -(ulWidth),
width: ((ulWidth)*3),
height: (carouselHeight),
position: 'absolute'
});
$('#carousel_wrap ul').css({
width: (ulWidth),
float: 'left'
});
$('#carousel_wrap ul').each(function(){
$(this).clone().prependTo('#carousel_move');
$(this).clone().appendTo('#carousel_move');
});
carouselPosition();
$('#carousel_prev').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
$('#carousel_next').click(function(){
clearInterval(setTimer);
$('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
carouselPosition();
});
timer();
});
function carouselPosition(){
var ulLeft = parseInt($('#carousel_move').css('left'));
var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
$('#carousel_move').css({left:-(ulWidth)});
} else if(ulLeft == 0) {
$('#carousel_move').css({left:-(ulWidth)});
};
};
timer();
function timer() {
setTimer = setInterval(function(){
$('#carousel_next').click();
},delayTime);
};
});
});
</script>
4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
5,6行目の
———————————-
var slideTime = 500;
var delayTime = 5000;
———————————-
は、「slideTime」がスライド動作のスピード
「delayTime」が自動でスライドする際の待機時間
となっているので自動でスライドするタイミング等を
ここの値を変更することで可能としてあります。
カルーセルパネルUIもいろいろなパターンがありますが
こういった自動で定期的にスライドさせる動作も
見せたい物が多い時などにも有効かと感じています。
オートスライド機能付きのカルーセルパネルUIが必要になった際に是非。。。
Related Posts
Trackback URL
Comments (45)
- « PreviousPost
Facebookの「いいね！ボタン」「いいね！ボックス」「コメント」の各パーツをWebページ上に設置する方法 - NextPost »
jQueryでコンテンツ要素を点滅させる方法
UPありがとうございます！
感謝感激です！
＞moriさん
コメントありがとうございます！
このカルーセルも参考にして頂けると幸いです。
参考になりました
ありがとうございます！
＞shonさん
コメントありがとうございます！
このスクリプトがご参考になったようで
サイト制作に少しでもお役立ていただけると
こちらとしても嬉しく思います。
参考になりました、ありがとうございます！
猫ちゃん達もかわいいです^^
とても理想通りの動きをしており、
ぜひ商用サイトでも参考にさせて頂きたいのですが、
ソースを参考にさせて頂いてもよろしでしょうか？
＞sachiさん
コメントありがとうございます！
このスクリプトをご活用いただいているようで
こちらとしても大変嬉しく思っております。
（猫写真も気に入っていただけたようでよかったです^^）
こちらのスクリプトの使用に関しては
個人・商用問わず、ご自由に使用していただいてかまいません。
この記事に関わらず、当ブログで紹介しているスクリプトは
特にライセンスなども設けていないので、
ご自由に使用および改変して
サイトに組み込んでいただいて問題ありませんので
ご活用いただけると幸いです！
よろしくお願いします！
とってもいい動きのプラグインですね。
是非使わせていただきたいと思い、
触らせていただいています。
が、少しつまずきまして、、、
3ライン作ってそれぞれの#carouselの値を
#carousel
#carousel2
#carousel3
として、jsやcssも
それぞれのIDごとに作ったのですが、
うまく動作しませんでした。
3ラインは無理でしょうか？
ご教授いただければ幸いでございます。
＞yamanさん
コメントありがとうございます！
返信が遅れてしまい申し訳ありませんでした。。
この記事のカルーセルスクリプトをご活用いただいているようで
嬉しく思っております。
紹介しているカルーセルスクリプトは、ページ内に1つ設置の想定になっているので
複数設置する場合には、強引にエリアの指定やスクリプト動作一つ一つに
01～03といったナンバリングをつけて動作を個別に指定する必要があります。
1ページ内に、このカルーセルをパネルを3つ設置した
パターンのサンプルを用意しましたので必要であれば
下記よりダウンロードして中身を確認してみてください。
http://black-flag.net/devel/jQuerySimpleCarouselAutoSlide/jQuerySimpleCarouselAutoSlideDual.zip
あまりキレイな方法とは言えないのですが
３つ動作はしています。
ご確認よろしくお願いします。
素敵なスクリプトのご紹介ありがとうございます！
早速参考にさせていただき、更に用途に合わせて手入れしたもので試しているのですが、
画像だけでなくテキストも含んだliをスライドするものを考えています。
そこで、現在ぶち当たっている壁がどうしてもクリアできないので、
分かりましたらお知恵をお借りできないかと･･･（汗）
1：スライド幅について
横幅にも変更を加えているのですが、スライドする幅がずれてしまい、
スライドする毎にどんどんどんどんずれていってしまいます。
この幅はどこかで指定できるのでしょうか？
2：リピートについて
幅を変えたことが原因かわからないのですが、リピートはするものの
つなぎ目に余分な余白が空いて綺麗につながりません。
どこを調整すればよいか教えていただけませんでしょうか？
初歩的な質問になりますが、
お時間有りましたらどうぞよろしくお願い致します。
シンプルでとても設置しやすいです！
スクリプトも大変参考にさせていただいています。
ありがとうございます。
よろしければひとつ質問させていただきたいのですが、
自動スライドで画像にマウスオーバー時に
スライドを一時停止させることはできますでしょうか？
（もし既に他の記事に出ていたらすみません。。）
お時間のあるときに教えていただけると幸いです。
よろしくお願いします。
BlackFlagさま！
さすがです。私が編集したスクリプトでは2行しか動かなかったのですが、
アップされてたJavaScriptに入れ替えると…ばっちり動きました！ありがとうございます！！！！！！
早く自分でも書けるように勉強続けていきます〜。
>nicoさま
私もテキスト込みのものを実装して、余白を均等につけたものをこちらのカルーセルで動かして、
初めはずれたのですが、cssを直すと直りましたよー。
もしかするとcssがわるさをしてるかもしれませんね。
＞nicoさん
コメントありがとうございました。
このスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
LIの幅をスクリプト側で計算して移動距離を出しているのですが
LIの幅にmarginやpaddingがついていると
その計算がおかしくなることがあります。
LIに対してはmarginやpaddingを付けずに（左右のみ）
レイアウトできるようにCSSを調整してみていただけますでしょうか。
ご確認の程、宜しくお願い致します。
＞minitさん
コメントありがとうございます！
このカルーセルスクリプトを参考にしていただいているようで
とても嬉しく思っております。
ご質問いただきましたマウスオーバーでスライドを一時停止させるには
「function timer()」のところでタイマーセットしているfunctionを
マウスオーバー時に制御させることで可能になります。
記述例としましては
——————————————
$(‘#carousel’).hover(function(){
clearInterval(setTimer);
},function(){
timer();
});
——————————————
をスクリプトに追加することで
カルーセルエリアにマウスオーバーで
動作ストップさせることができます。
サンプルファイルも用意しましたので
必要あれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQuerySimpleCarouselAutoSlide/jQuerySimpleCarouselAutoSlideHoverStop.zip
ご確認、宜しくお願い致します。
＞yamanさん
ご返信ありがとうございました！
ご希望の動作が実装できたようで安心致しました。
少々強引なやり方ではありましたが
無事に動いてよかったです。
nicoさんへのアドバイスもありがとうございました。
おそらく仰るとおりCSSの調整になるかと思います。
また何かありましたら宜しくお願い致します。
ご丁寧にありがとうございます！
無事に実装できました。
これからもいろいろと参考にさせていただきます。
よろしくお願いします。^ ^
＞BlackFlag
美味しがしい中、コメントへのご回答ありがとうございます。
一度調整してみたいと思います！
＞yaman様
アドバイスいただき有り難うございます！
一度cssを再確認してみようと思います。
助かりました！！
シンプルなコードで分かりやすくて、簡単にページに組み込めました。
ありがとうございます(^^)
はじめまして、初心者の私でも動かすことができました–!!
ありがとうございます。
1つだけうまくいかなかったのですが、最後の画像まで来ると、最初の画像が表示されず空白でスライドし、最後の画像が消えると一気に最初の画像に戻ります。。
CSSはコチラで提供していただいているものそのまま使っています。
どうしたらいいのでしょうか？
お忙しいのに申し訳ございません。。
＞senshichiさん
コメントありがとうございます！
このスライドスクリプトをサイトに実装していただいたようで
とても嬉しく思っております。
他にもいろいろなUIを簡単に実装できるサンプルを紹介していますので
お試しいただけると幸いです。
今後ともよろしくお願いします。
＞nanaさん
コメントありがとうございます。
このスライドスクリプトをご活用いただいているようで
嬉しく思っています。
ご質問いただきました件についてですが
全体構成を確認してみないと何とも言えないのですが
想定できることであれば、組み込んだ際にCSSのブラウザリセットが
きちんとされていないのではないかと思われます。
最低限のブラウザリセットである
———————————-
*{
margin: 0;
padding: 0;
}
———————————-
がCSSの始めに設定されているか
確認してみていただけますでしょうか。
よろしくお願いします。
お忙しい中お返事ありがとうございます！！
早速CSSに追加しましたところ、無事、余白が消えました！！
感動です★ありがとうございました。
これからもサイトで勉強させていただきます★
＞nanaさん
ご報告ありがとうございました！
無事に余白が消えて理想の動作が実装できたようで安心しました。
また何かあればご連絡くださいませ。
よろしくお願いします。
すごく助かりました！ありがとうございました！
＞あやさん
コメントありがとうございます！
このスライドショースクリプトがお役に立った様でよかったです！
いつも素敵なスクリプトをご提供いただきありがとうございます♪
自動スクロールを無くして矢印をクリックした場合のみ1枚づつスクロールされるようにしたいのですが、
現在は下記のように待機時間を長くして、自動スクロールしないようにごまかしているのですが……
——————————–
var slideTime = 0;
var delayTime = 100000;
——————————–
これでも動作的に問題ないでしょうか？
他にいい方法はありますか？
＞りおさん
コメントありがとうございます！
このカルーセルパネルスクリプトをご活用いただいているようで
嬉しく思っております。
自動スクロールを無くす場合についてですが
記事内で紹介しているスクリプトの下記の行を削除することで
動作させないことができるかと思います。
—————————————-
07 var delayTime = 5000;
46 clearInterval(setTimer);
50 timer();
54 clearInterval(setTimer);
58 timer();
71 timer();
73 function timer() {
74 setTimer = setInterval(function(){
75 $(‘#carousel_next’).click();
76 },delayTime);
77 };
—————————————-
これらを削除することで「timer()」で動作させている
自動スライド機能を削除することになります。
「delayTime 」を長い時間にすることで
強引にごまかす方法もナシではないかもしれませんが
こちらの方が適切なやり方だと思いますので
試してみてください。
よろしくお願いします。
ご丁寧にありがとうございます。
理想通りのスクリプトを設置することができました！
こちらのサイトはとても丁寧に記載していただいているのですぐにサイトに設置できて助かっています♪
またいろいろと利用させていただきますね。
＞りおさん
ご返信ありがとうございました。
無事に理想通りの動作が実装できたようで安心しました。
また何かありましたら
ご連絡くださいませ。
よろしくお願いします。
はじめまして、
jQueryのアニメーションを使って、
スライドが滑らかに途切れることなく続いていくスクリプトを、
探しておりましたので、とても助かりました。
CSSがシンプルでカスタマイズしやすかったです。
こちらで使用させて頂きます。
jQueryの書き方もわかり易かったです。ありがとうございます。
＞くるるさん
コメントありがとうございます。
このカルーセルスクリプトがご活用いただけたようで
とても嬉しく思っております。
他にもいろいろ紹介しておりますので
あれこれ試していただけると幸いです。
よろしくお願いします。
はじめまして、このようなカルーセルを探していましたので発見出来てとても嬉しく思います。
設置の際に疑問が出ましたので宜しければ教えていただけないでしょうか。
スライドのスピードを変更して、ゆっくりとするする止まる事無く画像が流れるようにしたかったのですが、
どうにも反応が鈍く、画像がかくかくしたり時々止まったりしてしまいます。
var slideTime = 4000;
var delayTime = 200;
こんな感じにしてみたのですが、原因はこの設定にありますか？
＞pさん
コメントありがとうございます。
このカルーセルスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
「slideTime」より「delayTime」の値を小さくすると
スライドアニメーションが完了する前に
次のアニメーションが次々と開始されることになってしまうので
———————————-
var slideTime = 4000;
var delayTime = 4200;
———————————-
この様にすることで
理想の時間が設定できるのではないかと思っております。
お試しください。
よろしくお願いします。
jQueryのスライドするカルーセルパネルUI
いつもお世話なっております。
自分のサイトでも使わせてもらっているのですが
トップページにアクセスすると
横にスライドしている画像たちが一瞬だけバラつきます。
すぐに元には戻るのですが、原因を教えてください。
ブラウザはsafari、firefox、スマホなどでアクセスすると上記のような現象がおこります。
よろしくお願いします。
＞BlackFlagさんのファンさん
コメントありがとうございます。
このカルーセルスクリプトをご活用いただいている様で嬉しく思っております。
ご質問いただいた件についてですが
こちらの環境ではその様な現象が確認できないのですが
この記事で紹介しているサンプルファイルをそのまま開いても
同じ現象が起こるということでしょうか？
全体に掛かるCSSが原因となる場合も考えられますが
一度ご確認ください。
よろしくお願いします。
はじめまして
素晴らしい、スライドアニメーションに出会い早速、使わせて頂こうと存じます。
test中、1点、IE6でブラウジングすると、下に余白（多分画像の高さ分）が表示されます。
cssでいろいろ設定してみましたがうまくいきません。
ご教授賜りたくお願い申し上げます。~66歳 老人より
ホームページ製作初心者です。
何とか独学でページ製作をしており、新しいことをするたびにつまずいてしまうほどですが。。。
このカルーセルを搭載したいのですが、記載されているとおりにすると見本と同じように動作するのですが、CSS,#carousel_prev(#carousel_next )の画像を差し替えるとliの画像に食い込んでしまいます。（liの画像がprevの画像の下に入ってしまう）のですがどこをどのように書き換えればよいでしょうか？
いろいろ試してみましたが答えが見つかりませんでした。
原因を教えてください。よろしくお願いいたします。
＞若林様
コメント有難う御座います。
このカルーセルスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが、
もうIE6はあまり想定内に入れていないのですが
やるとなると、サンプル構成で言う「#carousel」の周りを
任意のブロック要素（例えば「#carousel_cover」など）で囲い、
それに対してCSSで幅（#carousel幅＋左右のボタン幅）と高さを指定し
「overflow:hidden;」指定を加えることで解消されるのではないかと思っております。
お試しください。
よろしくお願いします。
＞tkmさん
コメントありがとうございます。
このカルーセルパネルスクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただきました件についてですが、
実際にどのように実装されているか
画面などが確認できないことには何とも言えないのですが
左右のボタンの幅をCSSで指定してあるので
ボタンのCSS「width」「left」「right」の値を確認してみてください。
よろしくお願いします。
はじめまして。
１つづつ移動するカルーセルを探しておりましたので、
イメージしていたものが見つかりとても助かりました。ありがとうございます。
できれば画像の下へサムネイルテキストを数行追加したものを作成したく、
liタグの中へdivタグを挿入して作成していたのですが、
ＩＥ７でだけ、リピートした際に空白のｕｌタグが２つできてしまい、
2つ分回転するまで表示がされないような状態になっております。
まだまだ初心者で申し訳ございませんがご教授いただけますでしょうか。
恐れ入りますがよろしくお願いいたします。
度々のご連絡失礼いたします。
解決できましたのでご連絡いたします。
原因はcssの「:after」タグがＩＥ７対象外だったためでした。
「:after」タグを使用できるjsをいれることでIE7は対応することにいたしました。
ご迷惑をおかけいたしました。
ありがとうございました。
＞catさん
コメントありがとうございます。
このカルーセルパネルスクリプトをご活用いただいている様で
嬉しく思っております。
IE7での問題も解消されたようでよかったです。
また何かありましたらよろしくお願いします。
はじめまして
kesnonと申します。
BlackFlagさんのスクリプト、とても参考になります。仕事に流用させていただきました。
ありがとうございます。
ご質問させて頂きます。
このカルーセルスクリプトですが、IE9での表示においてブラウザの表示倍率が100%以下（95%など）ですとループ３周目から表示されませんでした。（２周目は表示されます）100%以上ですと通常表示されます。
これはどの様な理由が考えられますでしょうか？
お時間がある時で結構ですのでご教授いただけると幸いです。
これからも他のスクリプトも含めて参考にさせていただきます。
ありがとうございました。
＞kesnonさん
コメントありがとうございます。
このカルーセルスクリプトをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきました件についてですが
こちらでも検証してみたところ
同様の現象を確認することができました。
調査してみたところ、IEでブラウザの表示比率を変えることで
比率の加減によって、移動距離に1pxの誤差が生じる現象が
発生することが分かりました。
解消方法としては
当記事で紹介しているスクリプトの
64行目
—————————————
if(ulLeft == ((-(ulWidth))*2)) {
—————————————
の記述を
—————————————
if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
—————————————
この様に変更することで
解消されるかと思います。
記事内のスクリプトの記述と
サンプル動作およびサンプルダウンロードファイル
それぞれの記述も修正しておきましたので
併せてご確認ください。
不具合動作のご報告、誠に有難う御座いました。
また何かお気づきの点等ありましたら
ご連絡くださいませ。
よろしくお願い致します。
＞BlackFlagさん
早速の調査、ご教授ありがとうございます。
スクリプト内に新しい記述を追加しまして、IE9で動作確認しました。無事に動作いたしました。
ありがとうございます。
やはり、IE関連は難しいです。
これからも良質のスクリプトを楽しみにしております。
ありがとうございました。
＞kesnonさん
ご確認ありがとうございます。
無事に問題も解消されたようで
安心致しました。
またIEでおかしな挙動など発生しましたら
ご連絡ください。
よろしくお願いします。