me-swiper

中文文档

Install

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

or script tag

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

and now you can use the global variable meSwiper

Usage

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

<div class="me-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 'me-swiper'

const mySwiper = new Swiper(document.querySelector('.me-swiper'));

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

.me-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('.me-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