【jQuery】プラグインを使用したクールエフェクトとページ設定easyPaginate.JS

jQuery

jQuery.easyPaginate

October 19, 2017

jQuery.easyPaginateは、リスト、リンクなどをページングするプラグインです。easyPaginateはかなり軽量、いくつかの便利なオプションがあり、Chrome、Firefox、Opera、Safari と互換性があります。

Getting Started

jQueryとjquery.easyPaginate.jsコードをインクルード

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.easyPaginate.js"></script>

HTML

<div id="easyPaginate">
    <img src="img/demo/surf1.jpg" />
    <img src="img/demo/surf2.jpg" />
    <img src="img/demo/surf3.jpg" />
    <img src="img/demo/surf4.jpg" />
    <img src="img/demo/surf5.jpg" />
    <img src="img/demo/surf6.jpg" />
    <img src="img/demo/surf7.jpg" />
    <img src="img/demo/surf8.jpg" />
    <img src="img/demo/surf9.jpg" />
</div>

CSS

/* Cosmetic only */
#easyPaginate {width:300px;}
#easyPaginate img {display:block;margin-bottom:10px;}
.easyPaginateNav a {padding:5px;}
.easyPaginateNav a.current {font-weight:bold;text-decoration:underline;}

Javascript

$('#easyPaginate').easyPaginate({
    paginateElement: 'img',
    elementsPerPage: 3,
    effect: 'climb'
});

MIT

Latest Posts

Related Posts