Tiny-Swiper — 4kB Ingenious JavaScript Carousel powered by wonderful plugins



npm



NPM
GitHub issues

Tiny-Swiper

Ingenious JavaScript Carousel powered by wonderful plugins with native-like experience for the web.
Zero dependency, written in TypeScript, used for free and without any attribution.

Looking for more details about APIs and Demos, visit tiny-swiper.joe223.com

Usage

Installation

# via npm
$ npm install tiny-swiper --save

# via yarn
$ yarn add tiny-swiper

If you prefer CDN

<script src="https://unpkg.com/[email protected]"></script>

Initialization

Html code:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

JavaScript/TypeScript code:

import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'

Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)
  • 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:

import Swiper from 'tiny-swiper/lib/index.full.js'
<script src="https://unpkg.com/[email protected]/lib/index.full.js"></script>

Browsers support

All modern browsers are supported, include IE10+.

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.

Author: Shantun Parmar

Comments are closed.