Lightweight Touch-enabled Swiper In Pure JavaScript – tiny-swiper

Preview:

Description:

A small yet fully configurable and touch-enabled swiper for creating responsive, mobile-friendly sliders, one-page scrolling webpages, single-page applications, and more.

Features:

• Written in pure JavaScript.
• Supports horizontal and vertical scrolling.
• Custom navigation & pagination controls.
• Infinite loop.
• Image lazy loader.
• Keyboard interactions.
• Switches between slides via mouse drag, touch swipe, and mouse wheel events.

How to use it:

1. Install & download the library.

# Yarn
$ yarn add tiny-swiper
# NPM
$ npm install tiny-swiper --save

2. Import the tiny-swiper as an ES module.

import Swiper, {
  // OPTIONAL Plugins
  SwiperPluginLazyload,
  SwiperPluginPagination,
  SwiperPluginKeyboardControl
} from 'tiny-swiper'

// Register plugins
Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination, SwiperPluginKeyboardControl ])

3. Or directly load necessary JavaScript files from CDN.

<script src="https://unpkg.com/[email protected]/lib/index.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/modules/lazyload.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/modules/pagination.min.js"></script>
<script src="https://unpkg.com/tiny-swip[email protected]/lib/modules/keyboardControl.min.js"></script>

4. Insert slides to the swiper following the markup structure as these:

<div class="swiper-container" id="example">
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="a swiper-slide">1</div>
    <div class="b swiper-slide">2</div>
    <div class="c swiper-slide">3</div>
    <div class="d swiper-slide">4</div>
    <div class="e swiper-slide">5</div>
    ...
  </div>
  <!-- OPTIONAL PAGINATION CONTROLS HERE -->
  <div class="swiper-plugin-pagination"></div>
</div>

5. Initialize the swiper and customize the pagination controls.

var mySwiper = new Swiper('#example', {
    pagination: {
      el: ".swiper-plugin-pagination",
      clickable: true,
      bulletClass: 't-ScrollBar__item',
      bulletActiveClass: 'is-active'
    },
    plugin: [ SwiperPluginPagination ]
});

6. Enable image lazy loading.

Swiper.use([SwiperPluginLazyload]);
var mySwiper = new Swiper('#example', {
    lazyload: {
      loadPrevNext: false,
      loadPrevNextAmount: 1,
      loadOnTransitionStart: false,
      elementClass: 'swiper-lazy',
      loadingClass: 'swiper-lazy-loading',
      loadedClass: 'swiper-lazy-loaded',
      preloaderClass: 'swiper-lazy-preloader'
    },
    plugins: [SwiperPluginLazyload]
});

7. Enable keyboard interactions.

Swiper.use([SwiperPluginLazyload]);
var mySwiper = new Swiper('#example', {
    keyboard: {
      enabled: true,
      onlyInViewport: true
    },
    plugins: [SwiperPluginKeyboardControl]
});

8. Full plugin options to customize the swiper as per your needs.

var mySwiper = new Swiper('#example', {
    // or 'vertical'
    direction: 'horizontal',
    // touch ratio
    touchRatio: 1,
    // angle (in degrees) to trigger touch move
    // also allows a range of values: [0, 90].
    touchAngle: 45,
    // ratio to trigger swipe
    longSwipesRatio: 0.5,
    // initial slide
    // 0 = slide 1
    initialSlide: 0,
    // infinite loop
    loop: false,
    // free mode
    freeMode: false,
    // enables mouse wheel
    mousewheel: false,
    // enable passive event listeners
    passiveListeners: true,
    // enable/disable resistance bounds
    resistance: true,
    // resistance ratio
    resistanceRatio: 0.85,
    // animation speed
    speed: 300,
    // minimal duration (in ms) to trigger swipe
    longSwipesMs: 300,
    // time to suspend between two swip actions
    intermittent: 0,
    // space between slides
    spaceBetween: 0,
    // number of slides per view
    slidesPerView: 1,
    // center the current slide
    centeredSlides: false,
    // default CSS classes
    slidePrevClass: 'swiper-slide-prev',
    slideNextClass: 'swiper-slide-next',
    slideActiveClass: 'swiper-slide-active',
    slideClass: 'swiper-slide',
    wrapperClass: 'swiper-wrapper',
    // prevent touchstart (mousedown) event
    touchStartPreventDefault: true,
    // prevent default for touchstart (mousedown) event
    touchStartForcePreventDefault: false,
    // if enabled, the propagation of "touchmove" will be stopped
    touchMoveStopPropagation: false,
    // exclude these elements
    excludeElements: [],
    injections: {
      translate: translate
    }
    
});

9. API methods.

// update the instance
mySwiper.update();
// update swiper size
mySwiper.updateSize();
// destroy the instance
mySwiper.destroy();
// scroll to a specific slide
mySwiper.scroll(index: number, force: boolean);

10. Event handlers.

mySwiper.on('before-init', function(instance){
  // ...
})
mySwiper.on('after-init', function(instance){
  // ...
})
mySwiper.on('before-slide', function(currentIndex, state, newIndex){
  // ...
})
mySwiper.on('scroll', function(state){
  // ...
})
mySwiper.on('after-slide', function(newIndex, state){
  // ...
})
mySwiper.on('before-destroy', function(instance){
  // ...
})
mySwiper.on('after-destroy', function(instance){
  // ...
})

Changelog:

v2.0.0 alpha4 (12/20/2020)

• New Version.
• Update Demo & Doc.

v1.3.0 (09/13/2020)

• Add: slidesPerView parameter
• Add: centeredSlides parameter
• Add: SwiperPluginKeyboardControl
• Fix: Unexpected slide width
• Fix: transform boundary

v1.2.0 (12/22/2019)

• Fix: Unexpected slide width

v1.2.0 (12/16/2019)

• Add: export ESM and full-featured file

v1.1.0 (12/09/2019)

• Add: SwiperPluginLazyload plugin
• Add: use method

v1.0.2 (11/19/2019)

• Add: excludeElements configuration
• Changes: update resistance calculate
• Changes: optimize package size

v1.0.0 (11/12/2019)

• Extract pagination plugin
• Add: destory method
• Add: life hooks

v0.1.0 (11/12/2019)

• Changes: pause scrolling on touch

v0.1.0 (10/29/2019)

• Changes: pause scrolling on touch
• Fix: click action stop scrolling while Swiper is scrolling