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/tiny-swiper@latest"></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/tiny-swiper@latest/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

16 thoughts on “Tiny-Swiper — 4kB Ingenious JavaScript Carousel powered by wonderful plugins

  1. I simply wanted to thank you so much once more. I do not know what I would’ve taken care of without these tactics shared by you regarding that subject. It was actually an absolute intimidating problem in my position, nevertheless taking a look at this specialized tactic you solved the issue took me to leap with happiness. I will be happy for your service and thus sincerely hope you really know what an amazing job you have been putting in teaching some other people using your webblog. Most likely you haven’t got to know any of us.

  2. Thanks for your whole work on this website. My niece takes pleasure in working on research and it is simple to grasp why. We all notice all relating to the powerful ways you render worthwhile tricks via your website and therefore welcome response from website visitors on this topic while our own simple princess is without question understanding so much. Take pleasure in the rest of the year. Your performing a wonderful job.

Thanks for your support, You may click on ads to encourage us which assits to writers.

Leave a Reply

Your email address will not be published.