jQueryでシンプルなカルーセルパネルスライドUIを作成する方法
サイト上での新着情報や関連情報などのギャラリー的要素となるものを
左右に設置した矢印ボタンなどを使って、表示要素をスライド操作させるカルーセルと呼ばれるUI。
jQueryプラグインでもカルーセルパネルを実装するものは数多く有りますが
必要最低限の動作でスクリプトもシンプルな形でのカルーセルパネルを作ってみたので紹介してみます。
まずは動作のサンプルから。
左右に現れる矢印をクリックしてください。
jQuery SIMPLE CAROUSEL【SAMPLE】
左右に現れる矢印をクリックすることで
並べられたコンテンツ要素（画像）が一つずつスライドします。
コンテンツ要素が左右の一番端に位置している時は
片方の矢印は非表示となります。
このカルーセルパネルUIの全体構成について、
まずはHTMLから。
[html]
◆HTML
[/html]
大枠を任意のIDで覆い（サンプルでは「#carousel」とします）、
その中に＜ul＞のリストを入れ込みます。
このリストの＜li＞が一つのコンテンツ要素となります。
コンテンツ要素を増やしたり減らしたりする際は、
HTML側で単純に＜li＞の数を変更すればいいだけになっています。
そしてこのHTMLソースに対してのCSSは以下の様に。
[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」の値がカルーセルパネルの表示領域となり
それぞれの値は変更が可能になっています。
一点注意点は、今回のサンプルの構成では
大枠ID、「#carousel」の幅（width）に対して、
その中に入る＜li＞「#carousel ul li」の幅（width）は
割り切れる値でないと正常に動作しません。。。
そして実際に動作を実行させるスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。
＜ul＞と＜li＞の長さを判断して左右の矢印の表示／非表示を判断したり
クリックした際の移動距離や位置を制御しています。
今回は必要最低限のシンプルなカルーセルパネルとなっているので
自動で再生される機能や、凝った演出も組み込んでいません。
サイト上にさりげなく載せる新着情報の様な、
派手な動きは求めないカルーセルパネルUIが必要な際などに使えるかなと思っています。
シンプルなカルーセルパネルUIが必要になった際に是非。。。
ピンバック: jQueryでページ送り（ページネーション）付きのカルーセルパネルスライドUIを作成する方法 | BlackFlag
こんにちは。今度はこちらで失礼します….
先日は色々教えて頂き、ありがとうございました！
$(“id名”).click(function () {
↑
を付けることでtoggleを使用したときでもちゃんと動きました！嬉しいです！！
図々しいかとは思ったのですが….
今度はこちらのカルーセルの場合も、
スライダーと同様に画像サイズが違っても動くようにするにはどうしたらいいのでしょうか….？
前回頂いたサンプルを参考に変更してみたのですが動かず….
スライダーの際に変更した箇所以外にも変更する箇所がありますでしょうか….？
お時間ある時で結構ですので、
もし可能でしたら教えて頂けると非常に有り難いです….
どうぞ、宜しくお願い致します。
＞meiさん
コメントありがとうございます。
ループスライダーでは無事にご希望の動作になったようで
安心しました！
そしてこっちのカルーセルの場合についてですが
カルーセルUIの場合、一つ一つの画像サイズが異なってくることで
左右のボタンクリック後の移動距離が、都度変化することになる上に、
カルーセルエリアの全体幅も表示している画像によって変化することになり、
ちょっと構成的に無理があるかと感じています。
いろいろ方法を考えて試してみましたのですが
ここで紹介しているスクリプトを変えただけでの実現はちょっと厳しく感じております。。
いい案が思い浮かばず申し訳ありませんが、
よろしくお願い致します。
こんばんは。
カルーセルになると、また全然違うのですね(>_<)
色々と試して頂き、ありがとうございます！
お時間取らせてしまい….申し訳ありませんでした。。
感謝しております、ありがとうございました！！
＞meiさん
ありがとうございます。
ご希望に沿うことができず申し訳ありませんでした。
また同じ様なUIを作ることができたら
ここで紹介させていただきます。
よろしくお願いします。
いつもお世話になっております！
個人的に作るサイトにカルーセルを設置したいと思い、
jcarouselでの設置を考えています。
ですが、ダウンロードしてもcssがないのと設置の方法が
よく分からくて助けを求めてしまいました。
スミマセン。
カルーセルはこんな感じにしたいと考えています。
http://www.yamashiro-spa.or.jp/
＞moriさん
コメントありがとうございます！
返事が遅れてしまいスミマセン。
カルーセルの動き確認しましたが
ここで紹介しているカルーセルUIは
ループ機能を付けていないこともあって
同じような動きにすることはちょっと厳しいかと思っています。
時間ができた時に同じようなカルーセルUIを作ってみますが
すぐにご用意する余裕がなさそうです。。
URLを張り付けていただいたサイトのCSSや、
jCarouselのデモページのCSSをコピーなどすることで
比較的簡単に同じ動作も実装できると思うので
一度試してみてください！
よろしくお願いします。
ありがとうございます！
お手数お掛けして申し訳ございません。
一度試してみます！
カルーセルの件ですが、無事設置できました！！
ソースから解析してCSSなども問題なくデザインできました！
ありがとうございました！
＞moriさん
わざわざご報告ありがとうございました！
無事に設置が完了したようでよかったです。
・・・実は
ご連絡いただいていた動作を
この記事のスクリプトを改良したものでサンプルの作成を進めていたので
近々また紹介させていただく予定です。
もう必要ないかもしれませんが^^;;
こちらこそありがとうございます！
こちらのサイトのおかげで僕のサイト制作に対する
姿勢が本当に変わりました。感謝の気持ちで胸がいっぱいです。
スクリプトの改良まで本当に申し訳ないです。
是非参考にさせて下さい！
実はまたカルーセルでつまづいております。笑
会社ではwindowsでサイト制作を行っているんですが、
復習のため自宅のmacでもカルーセルの設置を行ってみました。
ところが、土台の部分は出でくるんですが、肝心のスライドさせたい
画像が表示されておらず、うまく動いているのかすら確認できません！笑
記述はこのようになってます。
$(function() {
$(“.main .jCarouselLite”).jCarouselLite({
btnNext: “.next”,
btnPrev: “.prev”,
visible: 4,
auto: 5000,
speed: 500,
scroll: 1
});
});
＜a href=”#” rel=”nofollow”＞ ＜/a＞
＜a href=”/plan/soyu.html” rel=”nofollow”＞＜/a＞
＜a href=”/plan/soyu.html” rel=”nofollow”＞＜/a＞
＜a href=”/plan/soyu.html” rel=”nofollow”＞＜/a＞
＜a href=”/plan/soyu.html” rel=”nofollow”＞＜/a＞
＜a href=”/plan/soyu.html” rel=”nofollow”＞＜/a＞
＜a href=”#” rel=”nofollow”＞ ＜/a＞
長々と申し訳ございません。
お時間のあるときにご教授できればと思っております。
すみません！
＞moriさん
嬉しいお言葉ありがとうございました。
ここで紹介している記事がお役立て頂いているようで
とても嬉しく思っております。
macでのカルーセル動作についてですが
記述いただいたソースだけだとちょっと判断ができずにおります。。
画像はCSSで背景として指定しているということでしょうか？
ここのコメント欄だとソースの記述が
そのままタグとして認識されてしまうこともあり
もしお手数でなければお問い合わせページより
再度、HTML、CSS、JSの内容をお送りいただけると幸いです。
よろしくお願いします。
ピンバック: jQueryでカルーセルパネル « one step at a time
ピンバック: jQueryで自動でスライドするカルーセルパネルUIを作成する方法 | BlackFlag
なるべくシンプルなカルーセルパネルをと検索してこのページにたどり着きました。
イメージに近いUIでしたので、おう！これ、これ！と遠慮なく使用させて頂きました。
数値、矢印のオリジナル画像、色などのデザインで少しだけいじっただけの、ほぼコピペ状態で
設置しましたが、コンテンツ要素が最後のパネルに位置した時に、nextの矢印が非表示になりま
せん。動き出しのprev矢印の非表示含め、他は全てサンプル同様の動作・表示です。
原因として何が考えられるかご教示頂ければ助かります。
スクリプト、HTML、CSSなど必要でしたら、別途送信させて頂きます。
記載し忘れましたので追伸です。
最後のパネルの表示時に、nextボタンが非表示になりませので、最後のパネル表示後も、
nextボタンクリックで空白のまま左に移動する状態です。
以上よろしくお願いします。
＞matboyaさん
コメントありがとうございます。
当記事のカルーセルスクリプトをご活用いただいている様で
うれしく思っております。
ご質問頂きました件についてですが
実際に実装されているものを見てみないと何とも言えないのですが
CSSのブラウザリセットがされていない可能性もありますので
きちんとブラウザリセットをしていただくか、
もしくは、カルーセル用CSSの先頭に
—————————
#carousel,
#carousel * {
margin: 0;
padding: 0;
}
—————————
を追記してみてください。
よろしくお願いします。
ご返信ありがとうございます。
サイト全体にはリセットは記載しておりましたが、カルーセル設置ページのCSSにも
重ねて記載しましたが、動作は変わりませんでした。
このサイトはカラーミーショップなのですが、念のため自社サーバーに同じタグ、同じ
スクリプトでアップロードしましたら、最後のパネル表示時にnext矢印が消えてストップ
する正しい動作が確認できました。
このカラーミーのサイトでは、同じページに別の2つのjQeryを導入しております。
ここでの干渉がないか、別のスクリプトの表記ミス等ないかもチェックして試してみます。
もしかしたら、また質問させて頂くかもしれませんが。。。。(^_^;)
まずは御礼まで。
このカルーセルスライドをスマホ～タブレットの幅までは左右のボタンと画像全体を囲む箇所が記述通りに実行されて、PCサイズなら左右ボタンと囲む部分がないフラットの状態にできればなぁ…プログラミング能力ない私には夢のまた夢…とほほ
＞アシベさん
コメントありがとうございます。
レスポンシブに対応したカルーセルUIのスクリプトは
まだ当ブログでも紹介していないので、
そのような構成のスクリプトができましたら
ここで紹介させていただかこうかと思います。
よろしくお願いします。