WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでページ送り(ページネーション)付きのカルーセルパネルスライドUIを作成する方法

先日「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題した、
jQueryでのシンプルなカルーセルパネルを実装する方法を紹介しましたが
そのカルーセルパネルに、ページ送り(ページネーション)を付けた形での
バージョンアップ(?)版を作ってみたので紹介してみます。

まずは動作のサンプルから。
左右に現れる矢印、もしくは画像下の「●」をクリックしてみてください。

jQuery SIMPLE CAROUSEL with PAGINATION【SAMPLE】

前回のサンプルとは違い、左右の矢印をクリックすることで
エリア枠内に表示されている画像がまるっと入れ替わります。

上記サンプルは画像20枚を4ページにわけて
スライドさせている構成になっています。

画像下の「●」をクリックすることで
該当ページ(パネル?)へスライドします。

このカルーセルパネルUIの全体構成について、
まずはHTMLから。

[html]
◆HTML


[/html]

大枠を任意のIDで覆い(サンプルでは「#carousel」とします)、
その中にベースとなる<ul>を入れ込み、
このリストに対しても任意のIDを付けます。(サンプルでは「#carousel_base」とします)

ベースとなるリストの<li>が一度にスライドする
コンテンツ要素となります。

前回同様に、コンテンツ要素を増やしたり減らしたりする際は、
このベースとなる<ul>リストの<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#carousel_base {
height: 100px;
overflow: hidden;
}

#carousel ul#carousel_base li {
width: 500px;
float: left;
display: inline;
}

#carousel ul#carousel_base li ul {
width: 500px;
}

#carousel ul#carousel_base li ul li {
width: 100px;
float: left;
display: inline;
}

#carousel #carousel_pagination {
padding: 10px 0;
width: 100%;
text-align: center;
}

#carousel #carousel_pagination a {
margin: 0 5px;
width: 15px;
height: 15px;
display: inline-block;
overflow: hidden;
background:transparent url(../img/pagination_icon.jpg) no-repeat top left;
}

/* =======================================
ClearFixElements
======================================= */
#carousel ul:after {
content: “.”;
height: 0;
clear: both;
display: block;
visibility: hidden;
}

#carousel ul {
display: inline-block;
overflow: hidden;
}
[/css]

全体を囲んでいる「#carousel」の値がカルーセルパネルの表示領域となります。

今回のサンプルではスライドさせる長さは表示領域全体幅なので
「#carousel」と「ul#carousel_base li」の幅(width)は同じ値にします。

「#carousel_pagination」がページ送り(ページネーション)の
設定箇所になるので必要に応じて指定を変更してください。

そして実際に動作を実行させるスクリプトは以下の様になります。

[javascript]
◆SCRIPT


[/javascript]

4行目の「#carousel」が実行させるID名になるので
全体を別のID名で構成した場合には、ここの名前も変更する必要があります。

ページ送り(ページネーション)のボタンは、
ベースのリストとなる「ul#carousel_base」の<li>の数によって自動生成されます。

ページ送りのアイコンはサンプルでは全て「●」になっていますが、
1つ目のボタンは「control_btn1」
2つ目のボタンは「control_btn2」
3つ目のボタンは「control_btn3」
といったように、ボタン一つ一つに別々のクラスが付くようにナンバリングしてあるので
背景画像などを利用して数字の番号にすることも可能になっています。

前回のサンプルは左右の矢印での移動のみでしたが
この様なページ送り機能があった方がユーザーに対して優しい気もしています。

ページ送り付きのシンプルなカルーセルパネルUIが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

jQueryでページ送り(ページネーション)付きのカルーセルパネルスライドUIを作成する方法」への2件のフィードバック

  • 2012年10月20日 @ 12:18 AM
    パーマリンク

    BlackFlag様

    ページネーション付きのカルーセルを探しており、このサイトにたどり着きました。
    そこで質問です。
    次のようにカスタマイズすることは可能なのでしょうか?

    1.自動再生
    2.画像は1枚ずつスクロール
    3.スクロールはループ

    お忙しいところ恐れ入りますが、よろしくお願いいたします。

    返信
  • 2012年10月22日 @ 1:09 AM
    パーマリンク

    >nakagawaさん

    コメントありがとうございます。

    ご質問頂きましたカルーセルのカスタマイズについてですが

    1.自動再生
    自動再生については、当ブログ別記事の
    ———————————————-
    jQueryでフリック/スワイプ動作付きの自動再生スライドショーを作成する実験
    http://black-flag.net/jquery/20120314-3723.html
    ———————————————-
    こちらの自動再生部分を組み合わせることで
    可能になるかと思います。

    2.画像は1枚ずつスクロール
    当記事で紹介しているカルーセルの構成で考えた場合は
    画像を1枚ずつスクロールさせるとページネーションとの整合性が合わなくなります。
    全体を<ul>の入れ子で構成してあるので
    実装時の組み方によって1枚ずつスクロールしているように見せることも可能かと思います。

    3.スクロールはループ
    こちらは現状の構成ではちょっと厳しいかと感じております。。

    以上になりますがご検討ください。
    よろしくお願いします。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です