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

Category: Recommended , Slider | December 20, 2020
Author: joe223
Views Total: 185 views
Official Page: Go to website
Last Update: December 20, 2020
License: MIT

Preview:

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

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/[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

You Might Be Interested In:


Leave a Reply