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

Category: Recommended , Slider | September 13, 2020
Author:joe223
Views Total:265 views
Official Page:Go to website
Last Update:September 13, 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.
  • 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 into the document.

<script src="./lib/index.js"></script>
<script src="./lib/modules/pagination.min.js"></script>

3. 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-pagination"></div>
</div>

4. Initialize the swiper and customize the pagination controls.

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

5. 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'
    }
});

6. 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,

    // enables mouse wheel
    mousewheel: false,

    // pagination controls
    pagination: 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: []
    
});

7. API methods.

// update the instance
mySwiper.update();

// destroy the instance
mySwiper.destroy();

// scroll to a specific slide
mySwiper.scroll(index: number, force: boolean);

Changelog:

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