Skip to content

SimonZhangITer/light-swiper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Light-Swiper

npm version Download Count

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

About

a lightweight Swiper native js plugin (3kb gziped)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published