Tiny-Swiper

Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet...

joe223/tiny-swipertiny-swiper.js.orgtiny-swiper

README

npm NPM GitHub issues

Tiny-Swiper

Ingenious JavaScript Carousel powered by wonderful plugins with native-like experience.
Lightweight yet extensible. Import plugins as needed, No more, no less.
Zero dependency, written in TypeScript, used for free and without any attribution.

Looking for more details about APIs and Demos, visit tiny-swiper.js.org


Usage


Installation


  1. ``` sh
  2. # via npm
  3. $ npm install tiny-swiper --save

  5. # via yarn
  6. $ yarn add tiny-swiper
  7. ```

If you prefer CDN

  1. ``` html
  2. <script src="https://unpkg.com/tiny-swiper@latest"></script>
  3. ```

Initialization


Html code:

  1. ``` html
  3. <div class="swiper-container">
  4.     
  5.     <div class="swiper-wrapper">
  6.         
  7.         <div class="swiper-slide">Slide 1</div>
  8.         <div class="swiper-slide">Slide 2</div>
  9.         <div class="swiper-slide">Slide 3</div>
  10.         ...
  11.     </div>
  12.     
  13.     <div class="swiper-pagination"></div>
  14. </div>
  15. ```

JavaScript/TypeScript code:

  1. ``` js
  2. import Swiper, {
  3.     SwiperPluginLazyload,
  4.     SwiperPluginPagination
  5. } from 'tiny-swiper'

  7. Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

  9. const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  10. ```

- new Swiper() - initialize swiper with options.
- Swiper.use() - Register plugin.
- swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
- parameters - object with Swiper parameters. Optional.


You also can load full-featured Tiny-Swiper:

  1. ``` js
  2. import Swiper from 'tiny-swiper/lib/index.full.js'
  3. ```

  1. ``` html
  2. <script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>
  3. ```

Browsers support


All modern browsers are supported, include IE10+.

[[[[[[[
---------------------------------------------------------------
IE10,lastlastlastlastlastlast

Contribution


Please make sure to read the Contributing Guide before making a pull request.

Thanks goes to these wonderful people


License


Tiny-Swiper is licensed under a MIT License.