以前のものをカスタマイズして、試しに作ってみたので紹介してみます。SLIDE【SAMPLE】5秒ごとにカルーセルパネルが自動でスライドします。スライドは左右の矢印をクリックすることで動作させることも可能です。要素全体はループして表示されます。このカルーセルパネルUIの全体構成について、まずはHTMLから。/></a></li></ul></div><!--/#carousel-->HTMLは以前の記事のものと構成は全く変わっていません。大枠を任意のIDで覆い(サンプルでは「#carousel」とします)、その中に<ul>のリストを入れ込みます。このリストの<li>が一つのコンテンツ要素となります。コンテンツ要素を増やしたり減らしたりする際は、HTML側で単純に<li>の数を変更すればいいだけになっています。このHTMLソースに対してのCSSは以下の様に。hidden;}CSSも以前の記事のものと構成は全く変わっていません。全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となりそれぞれの値は変更が可能になっています。実際に動作を実行させるスクリプトは以下の様になります。setInterval(function(){$('#carousel_next').click();},delayTime);};});});</script>4行目の「#carousel」が実行させるID名になるので全体を別のID名で構成した場合には、ここの名前も変更する必要があります。-は、「slideTime」がスライド動作のスピード「delayTime」が自動でスライドする際の待機時間となっているので自動でスライドするタイミング等をここの値を変更することで可能としてあります。カルーセルパネルUIもいろいろなパターンがありますがこういった自動で定期的にスライドさせる動作も見せたい物が多い時などにも有効かと感じています。オートスライド機能付きのカルーセルパネルUIが必要になった際に是非。PostsjQueryでシンプルなカルーセルパネルスライドUIを作成する方法jQueryでページ送り(ページネーション)付きのカルーセルパネルスライドUIを作成する方法jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法jQueryスライド用スクリプトもろもろ。jQueryスライド用スクリプトもろもろ。23:18>moriさんコメントありがとうございます!このカルーセルも参考にして頂けると幸いです。9:54>shonさんコメントありがとうございます!このスクリプトがご参考になったようでサイト制作に少しでもお役立ていただけるとこちらとしても嬉しく思います。18:06>sachiさんコメントありがとうございます!このスクリプトをご活用いただいているようでこちらとしても大変嬉しく思っております。(猫写真も気に入っていただけたようでよかったです^^)こちらのスクリプトの使用に関しては個人・商用問わず、ご自由に使用していただいてかまいません。18:08とってもいい動きのプラグインですね。触らせていただいています。つまずきまして、、、3ライン作ってそれぞれの#carouselの値を#carousel#carousel2#carousel3として、jsやcssもそれぞれのIDごとに作ったのですが、うまく動作しませんでした。3ラインは無理でしょうか?ご教授いただければ幸いでございます。23:49>yamanさんコメントありがとうございます!返信が遅れてしまい申し訳ありませんでした。この記事のカルーセルスクリプトをご活用いただいているようで嬉しく思っております。紹介しているカルーセルスクリプトは、ページ内に1つ設置の想定になっているので複数設置する場合には、強引にエリアの指定やスクリプト動作一つ一つに01~03といったナンバリングをつけて動作を個別に指定する必要があります。1ページ内に、このカルーセルをパネルを3つ設置したパターンのサンプルを用意しましたので必要であれば下記よりダウンロードして中身を確認してみてください。http://black-flag.net/devel/jQuerySimpleCarouselAutoSlide/jQuerySimpleCarouselAutoSlideDual.zipあまりキレイな方法とは言えないのですが3つ動作はしています。ご確認よろしくお願いします。画像だけでなくテキストも含んだliをスライドするものを考えています。分かりましたらお知恵をお借りできないかと・・・(汗)1:スライド幅について横幅にも変更を加えているのですが、スライドする幅がずれてしまい、スライドする毎にどんどんどんどんずれていってしまいます。この幅はどこかで指定できるのでしょうか?2:リピートについて幅を変えたことが原因かわからないのですが、リピートはするもののつなぎ目に余分な余白が空いて綺麗につながりません。どこを調整すればよいか教えていただけませんでしょうか?初歩的な質問になりますが、お時間有りましたらどうぞよろしくお願い致します。19:13シンプルでとても設置しやすいです!スクリプトも大変参考にさせていただいています。ありがとうございます。自動スライドで画像にマウスオーバー時にスライドを一時停止させることはできますでしょうか?(もし既に他の記事に出ていたらすみません。)お時間のあるときに教えていただけると幸いです。20:52BlackFlagさま!さすがです。私が編集したスクリプトでは2行しか動かなかったのですが、アップされてたJavaScriptに入れ替えると...ばっちり動きました!ありがとうございます!!!!!!早く自分でも書けるように勉強続けていきます〜。初めはずれたのですが、cssを直すと直りましたよー。するとcssがわるさをしてるかもしれませんね。0:26>nicoさんコメントありがとうございました。このスクリプトをご活用いただいているようで嬉しく思っております。ご質問いただきました件についてですがLIの幅をスクリプト側で計算して移動距離を出しているのですがLIの幅にmarginやpaddingがついているとその計算がおかしくなることがあります。LIに対してはmarginやpaddingを付けずに(左右のみ)レイアウトできるようにCSSを調整してみていただけますでしょうか。ご確認の程、宜しくお願い致します。0:59>minitさんコメントありがとうございます!このカルーセルスクリプトを参考にしていただいているようでとても嬉しく思っております。timer()」のところでタイマーセットしているfunctionをマウスオーバー時に制御させることで可能になります。スクリプトに追加することでカルーセルエリアにマウスオーバーで動作ストップさせることができます。サンプルファイルも用意しましたので必要あれば下記URLよりダウンロードしてみてください。http://black-flag.net/devel/jQuerySimpleCarouselAutoSlide/jQuerySimpleCarouselAutoSlideHoverStop.zipご確認、宜しくお願い致します。1:02>yamanさんご返信ありがとうございました!ご希望の動作が実装できたようで安心致しました。少々強引なやり方ではありましたが無事に動いてよかったです。nicoさんへのアドバイスもありがとうございました。仰るとおりCSSの調整になるかと思います。何かありましたら宜しくお願い致します。16:51ご丁寧にありがとうございます!無事に実装できました。これからもいろいろと参考にさせていただきます。9:30>BlackFlag美味しがしい中、コメントへのご回答ありがとうございます。一度調整してみたいと思います!>yaman様アドバイスいただき有り難うございます!一度cssを再確認してみようと思います。10:53助かりました!!シンプルなコードで分かりやすくて、簡単にページに組み込めました。14:56はじめまして、初心者の私でも動かすことができました–!!ありがとうございます。1つだけうまくいかなかったのですが、最後の画像まで来ると、最初の画像が表示されず空白でスライドし、最後の画像が消えると一気に最初の画像に戻ります。CSSはコチラで提供していただいているものそのまま使っています。したらいいのでしょうか?お忙しいのに申し訳ございません。1:01>senshichiさんコメントありがとうございます!このスライドスクリプトをサイトに実装していただいたようでとても嬉しく思っております。他にもいろいろなUIを簡単に実装できるサンプルを紹介していますのでお試しいただけると幸いです。今後ともよろしくお願いします。1:08>nanaさんコメントありがとうございます。このスライドスクリプトをご活用いただいているようで嬉しく思っています。ご質問いただきました件についてですが全体構成を確認してみないと何とも言えないのですが想定できることであれば、組み込んだ際にCSSのブラウザリセットがきちんとされていないのではないかと思われます。-がCSSの始めに設定されているか確認してみていただけますでしょうか。11:11お忙しい中お返事ありがとうございます!!早速CSSに追加しましたところ、無事、余白が消えました!!感動です★ありがとうございました。21:11>nanaさんご報告ありがとうございました!無事に余白が消えて理想の動作が実装できたようで安心しました。何かあればご連絡くださいませ。0:37>りおさんコメントありがとうございます!このカルーセルパネルスクリプトをご活用いただいているようで嬉しく思っております。-これらを削除することで「timer()」で動作させている自動スライド機能を削除することになります。」を長い時間にすることで強引にごまかす方法もナシではないかもしれませんがこちらの方が適切なやり方だと思いますので試してみてください。11:02ご丁寧にありがとうございます。理想通りのスクリプトを設置することができました!こちらのサイトはとても丁寧に記載していただいているのですぐにサイトに設置できて助かっています♪またいろいろと利用させていただきますね。20:33>りおさんご返信ありがとうございました。無事に理想通りの動作が実装できたようで安心しました。何かありましたらご連絡くださいませ。探しておりましたので、とても助かりました。CSSがシンプルでカスタマイズしやすかったです。こちらで使用させて頂きます。jQueryの書き方もわかり易かったです。ありがとうございます。0:53>くるるさんコメントありがとうございます。このカルーセルスクリプトがご活用いただけたようでとても嬉しく思っております。他にもいろいろ紹介しておりますのであれこれ試していただけると幸いです。12:52はじめまして、このようなカルーセルを探していましたので発見出来てとても嬉しく思います。設置の際に疑問が出ましたので宜しければ教えていただけないでしょうか。スライドのスピードを変更して、ゆっくりとするする止まる事無く画像が流れるようにしたかったのですが、どうにも反応が鈍く、画像がかくかくしたり時々止まったりしてしまいます。22:22>pさんコメントありがとうございます。このカルーセルスクリプトをご活用いただいているようで嬉しく思っております。-この様にすることで理想の時間が設定できるのではないかと思っております。