Skip to content

Lightweight, extensible and powerful JavaScript carousel with native-like experience.

Notifications You must be signed in to change notification settings

pablomercadolibre/tiny-swiper

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm NPM GitHub issues

Tiny-Swiper

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.

Documentation

To check out live examples and docs, visit https://joe223.com/tiny-swiper.

Guide to usage

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>

FAQ

1. Should I use Tiny-Swiper?

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.

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
Samsung
Opera
Opera
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

License

Tiny-Swiper is licensed under a MIT License.

About

Lightweight, extensible and powerful JavaScript carousel with native-like experience.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 52.6%
  • HTML 28.2%
  • JavaScript 13.7%
  • CSS 3.1%
  • SCSS 2.0%
  • Shell 0.4%