Lightweight, extensible and powerful JavaScript carousel with native-like experience for the web. Zero dependency, written in vanilla JavaScript, used for free and without any attribution.
To check out live examples and docs, visit https://joe223.com/tiny-swiper.
Install Swiper via npm or yarn:
$ npm install tiny-swiper --save
If you prefer CDN, just make sure constructor Swiper
is defined in browser global environment.
<script src="https://unpkg.com/tiny-swiper@latest"></script>
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>
Tiny-Swiper keeps the core functions likes Touch/Resistance/Intermittent control, we usually did not use many features on mobile side after all. That the reason why it is smaller and the purpose I wrote it.
If you are looking for some feature special or going to create a complicate slide project. Please check APIs before importing to ensure the feature you want is supported. Full-featured SwiperJS should be a better choice sometimes.
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() iOS Safari |
![]() Samsung |
![]() Opera |
---|---|---|---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Tiny-Swiper is licensed under a MIT License.