JavaScriptで簡単ページネーション｜mam-pagination.jsの使い方と実装例
JavaScriptでページネーションを実装したいけれど、複雑なコードを書くのは面倒…そんな方におすすめなのがmam-pagination.js！
この記事では、簡単にページングを実現する方法を詳しく解説します。
-
mam-pagination.js(6KB)ダウンロード
上記ボタンを押してmam-pagination.jsをダウンロードします。
- mam-paginationを使いたいファイルで、
<script src="./js/mam-pagination.js"></script>
のように、相対又は絶対パスでmam-pagination.jsを指定します。
- 使いたい場所でDIVタグのクラスに"mamPagination"を指定し、入れたいページの数だけ子要素のDIVタグを入れます。
<div class="mamPagination">
<div>
ここが1ページ目
自由にタグや文字を入れる
</div>
<div>
ここが2ページ目
自由にタグや文字を入れる
</div>
</div>
使用例とソースコード
１ページ目
ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。
ここは最初のページです。
２ページ目
ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。
３ページ目
ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。
ここは最後のページです。
<script src="./js/mam-pagination.js"></script>
<div class="mamPagination">
<div>
<h4>１ページ目</h4>
<p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。<br>ここは最初のページです。</p>
<img src="./imgs/car3.jpg" style="width:200px;height:auto;" width="600" height="400">
<img src="./imgs/c001s.jpg" style="width:200px;height:auto;" width="640" height="480">
</div>
<div>
<h4>２ページ目</h4>
<p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。</p>
<img src="./imgs/car2.jpg" style="width:200px;height:auto;" width="600" height="400">
</div>
<div>
<h4>３ページ目</h4>
<p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。<br>ここは最後のページです。</p>
<img src="./imgs/car1.jpg" style="width:200px;height:auto;" width="600" height="400">
</div>
</div>