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

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

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

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

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 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

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.

MIT License