【jQuery】プラグインを使用したクールエフェクトとページ設定easyPaginate.JS
jQuery
October 19, 2017
- TAGS:
- Animations
- jQuery
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
