Author: | SimonZhangITer |
---|---|
Views Total: | 1,165 views |
Official Page: | Go to website |
Last Update: | March 1, 2019 |
License: | MIT |
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 })