Lightweight Mobile Swiper In Pure JavaScript – Light-Swiper

Category: Javascript , Slider | March 1, 2019
Author: SimonZhangITer
Views Total: 273
Official Page: Go to website
Last Update: March 1, 2019
License: MIT

Preview:

Lightweight Mobile Swiper In Pure JavaScript – Light-Swiper

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:

Light-Swiper

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

})

You Might Be Interested In:


Leave a Reply