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

Category: Recommended , Slider | October 29, 2019
Author: joe223
Views Total: 57
Official Page: Go to website
Last Update: October 29, 2019
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>

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="t-ScrollBar"></div>
</div>

4. Initialize the swiper and customize the pagination controls.

var mySwiper = new Swiper('#example', {
    pagination: {
      el: '.t-ScrollBar',
      bulletClass: 't-ScrollBar__item',
      bulletActiveClass: 'is-active'
    }
});

5. The example pagination styles.

.t-ScrollBar {
  display: block;
  position: fixed;
  top: 50%;
  right: 2.2rem;
  width: 0.5rem;
  transform: translateY(-50%);
}

.t-ScrollBar__item {
  display: block;
  margin: 100% 0;
  width: 100%;
  padding-top: 100%;
  height: 0;
  box-shadow: 0 0 0 0.1rem #22216D inset;
  box-shadow: 0 0 0 0.1rem var(--theme-color) inset;
  border-radius: 50% !important;
  border: none;
  background: #FFF;
  transition: background ease 0.2s;
  cursor: pointer;
}

.t-ScrollBar__item.is-active {
  background: #22216D;
  background: var(--theme-color);
}

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,

    // 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
    
});

Changelog:

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