先日「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法」と題した、 jQueryでのシンプルなカルーセルパネルを実装する方法を紹介しましたが そのカルーセルパネルに、ページ送り(ページネーション)を付けた形での バージョンアップ(?)版を作ってみたので紹介してみます。 まずは動作のサンプルから。 左右に現れる矢印、もしくは画像下の「●」をクリックしてみてください。 jQuery SIMPLE CAROUSEL with PAGINATION【SAMPLE】 前回のサンプルとは違い、左右の矢印をクリックすることで エリア枠内に表示されている画像がまるっと入れ替わります。 上記サンプルは画像20枚を4ページにわけて スライドさせている構成になっています。 画像下の「●」をクリックすることで 該当ページ(パネル?)へスライドします。 このカルーセルパネルUIの全体構成について、
![jQueryでページ送り(ページネーション)付きのカルーセルパネルスライドUIを作成する方法|BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)