https://github.com/shimabox/insta-like-swiper-pagination

This is a library that makes Swiper.js pagination look like Instagram.
https://github.com/shimabox/insta-like-swiper-pagination

carousel swiper

Last synced: 22 days ago
JSON representation

This is a library that makes Swiper.js pagination look like Instagram.

• Host: GitHub
• URL: https://github.com/shimabox/insta-like-swiper-pagination
• Owner: shimabox
• Created: 2021-12-21T10:41:01.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-01-09T10:16:01.000Z (almost 3 years ago)
• Last Synced: 2023-02-26T11:26:12.664Z (almost 2 years ago)
• Topics: carousel, swiper
• Language: JavaScript
• Homepage:
• Size: 117 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# insta-like-swiper-pagination

## これは何？

[Swiper.js](https://swiperjs.com/ "Swiper - The Most Modern Mobile Touch Slider")のページネーションをInstagram風の動きにするライブラリです。

## Demo

https://shimabox.github.io/insta-like-swiper-pagination/

## 使い方

```js

  // 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);

      }

    }

  });

```

※ 詳しい使い方はTODOです

## TODO

* [ ] ページが動いたときにアニメーションが必要

  * ページが変わった感がない

* [ ] READMEをもう少しちゃんと書く

* [ ] cssがちょっと適当すぎる

* [ ] 処理のカスタムが行えるようにオプションを渡せる機構を用意する

* [ ] 簡易でもいいのでテスト書く

## Blog

- [Swiper.jsのページネーションをInstagram風にする – Shimabox Blog](https://blog.shimabox.net/2021/12/22/made_swiperjs_pagination_to_look_like_instagram/ "Swiper.jsのページネーションをInstagram風にする – Shimabox Blog")

  - ここに実装の元となったロジックなどを書いています

## License

The MIT License (MIT). Please see [License File](LICENSE) for more information.