Lightweight Mobile Swiper In Pure JavaScript – Light-Swiper

Preview:

Description:

A lightweight, mobile-first swiper library that allows the visitor to switch between images using swipe left/right events.

View the demo on mobile:

How to use it:

Installation.

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

Import the Light-Swiper.

import Swiper from 'light-swiper'

The basic HTML structure for the swiper.

<div class="light-swiper" id="siwper-demo">
  <div class="swiper-wrap">
    <div class="swipe-item">
      <div class="pic">
        <img
          src="1.jpg"
        />
      </div>
    </div>
    <div class="swipe-item">
      <div class="pic">
        <img
          src="2.jpg"
        />
      </div>
    </div>
  </div>
</div>

Initialize the library and done.

const mySwiper = new lightSwiper(document.querySelector('#siwper-demo'))

The example CSS for the swiper.

.light-swiper {
  overflow: hidden;
  position: relative;
  background: #f1f1f1;
  padding: 10px 0;
}
.swiper-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-item {
  float: left;
  width: 100%;
  position: relative;
}
.pic {
  display: block;
  position: relative;
  border-radius: 3px;
  line-height: 0;
  height: 250px;
  margin: 0 10px;
  overflow: hidden;
}

Possible plugin options to customize the swiper.

new lightSwiper(document.querySelector('#siwper-demo'),{
    // width
    width: null,
    // offset
    offset: null,
    // initial image
    startSlide: 0
    // animation speed
    speed: 300
    // autoplay interval
    auto: null,
    // infinite loop
    continuous: false
    // disable page scroll on swipe
    disableScroll: false
    // stop event propagation
    stopPropagation : false
    // callbacks
    callback: function(index, currentEl) {},
    transitionEnd: function(index, currentEl) {}
    // start the transition based on how far you swipe the image
    // from 0 to 1
    swiping: null
})