JavaScriptで簡単ページネーション｜mampager.jsの使い方と実装例

JavaScriptでページネーションを実装したいけれど、複雑なコードを書くのは面倒…そんな方におすすめなのがmampager.js！
この記事では、簡単にページングを実現する方法を詳しく解説します。

mampager.js(6KB)ダウンロード
上記ボタンを押してmampager.jsをダウンロードします。
mamPagerを使いたいファイルで、
```
  <script src="./js/mampager.js"></script>
```
のように、相対又は絶対パスでmampager.jsを指定します。
使いたい場所でDIVタグのクラスに"mamPager"を指定し、入れたいページの数だけ子要素のDIVタグを入れます。

<div class="mamPager">
  <div>
    ここが1ページ目
    自由にタグや文字を入れる
  </div>
  <div>
    ここが2ページ目
    自由にタグや文字を入れる
  </div>
</div>

使用例とソースコード

１ページ目

ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。
ここは最初のページです。

２ページ目

ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。

３ページ目

ここに任意のコンテンツを入れることが出来ます。
画像も入れることが出来ます。
ここは最後のページです。

<script src="./js/mampager.js"></script>
<div class="mamPager">
  <div>
    <h4>１ページ目</h4>
    <p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。<br>ここは最初のページです。</p>
    <img src="./imgs/car3.jpg" style="width:200px;" width="600" height="400">
    <img src="./imgs/c001s.jpg" style="width:200px;" width="640" height="480">
  </div>
  <div>
    <h4>２ページ目</h4>
    <p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。</p>
    <img src="./imgs/car2.jpg" style="width:200px;" width="600" height="400">
  </div>
  <div>
    <h4>３ページ目</h4>
    <p>ここに任意のコンテンツを入れることが出来ます。<br>画像も入れることが出来ます。<br>ここは最後のページです。</p>
    <img src="./imgs/car1.jpg" style="width:200px;" width="600" height="400">
  </div>
</div>