Swiper.jsのページネーションをInstagram風の動きにするライブラリです。
https://shimabox.github.io/insta-like-swiper-pagination/
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="./js/InstaLikeSwiperPagination.js"></script>
<script>
// Make pager instance.
const pagination = new InstaLikeSwiperPagination();
// Make Swiper.
new Swiper('.my-swiper', {
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'custom',
renderCustom: function (swiper, current, total) {
return pagination.render(swiper.slides, current, total);
}
}
});
</script>
※ 詳しい使い方はTODOです
- ページが動いたときにアニメーションが必要
- ページが変わった感がない
- READMEをもう少しちゃんと書く
- cssがちょっと適当すぎる
- 処理のカスタムが行えるようにオプションを渡せる機構を用意する
- 簡易でもいいのでテスト書く
- Swiper.jsのページネーションをInstagram風にする – Shimabox Blog
- ここに実装の元となったロジックなどを書いています
The MIT License (MIT). Please see License File for more information.