Light-Swiper

Focus on mobile, lightweight Swiper native js plugin (3kb gziped)

Fork of original Swipe, implement custom swipe width, offset, infinite carousel and other functions for a smoother experience

中文文档

Preview

Preview

Install

npm install light-swiper
// or
yarn add light-swiper

or script tag

<script src="./swiper.min.js"></script>

and now you can use the global variable lightSwiper

Usage

Swipe only needs to follow a simple layout pattern. Here is an example:

<div class="light-swiper">
  <div class="swiper-wrap">
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
    <div class="swipe-item"></div>
  </div>
</div>

Above is the initial required structure – a series of elements wrapped in two containers. Place any content you want within the items. The containing div will need to be passed to the Swipe function like so:

import Swiper from 'light-swiper'
 
const mySwiper = new Swiper(document.querySelector('.light-swiper'));

Also Swipe needs just a few styles added to your stylesheet:

.light-swiper {
  overflow: hidden;
  position: relative;
}
 
.swiper-wrap {
  overflow: hidden;
  position: relative;
}
 
.swipe-item {
  float: left;
  width: 100%;
  position: relative;
}

Config Options

Swiper can take an optional second parameter– an object of key/value settings:

parameter	description	type	default
width	customize the width of a single swipe	int	-
offset	Swipe's distance to the left of the offset	int	-
startSlide	index position Swipe should start at	int	0
speed	speed of prev and next transitions in milliseconds	int	300
auto	begin with auto slideshow (time in milliseconds between slides)	int	-
continuous	create an infinite feel with no endpoints	boolean	false
disableScroll	stop any touches on this container from scrolling the page	boolean	false
stopPropagation	stop event propagation	boolean	false
callback	runs at slide change	Function	(index, currentEl)
transitionEnd	runs at the end slide transition	Function	(index, currentEl)
swiping	invoked while swiping with the percentage (0-1) of the full width that has been swiped	Function	(percent)

Example

const mySwiper = new Swiper(document.querySelector('.light-swiper'), {
  width: 310,
  offset: 30,
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Swipe API

Swipe exposes a few functions that can be useful for script control of your slider.

prev() slide to prev

next() slide to next

getPos() returns current slide index position

getNumSlides() returns the total amount of slides

kill() destroy the current swiper instance

Browser Support

Swiper is now compatible with all browsers, including IE7+. Swipe works best on devices that support CSS transforms and touch, but can be used without these as well. A few helper methods determine touch and CSS transition support and choose the proper animation methods accordingly.

Who's using Swipe

---

MIT License