Light-Swiper

A lightweight native plugin for Swiper (3KB gziped) that focuses on mobile. Touch events are based on element and do not affect touch events on the page (such as right swipe back to previous page)

Swipe is reconstructed to achieve customized Swipe width, offset, infinite rotation, event replication and other functions, making the experience more smooth

Git repository

If you find it useful, welcome star~

preview

preview

The installation

npm install light-swiper
// or
yarn add light-swiper
Copy the code

Or introduced as script tags

<script src="./swiper.min.js"></script>
Copy the code

Now you can use the global variable lightSwiper

usage

Light-swiper just follows a simple layout pattern, such as:

<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>
Copy the code

This is the initial structure needed: a series of elements wrapped in two containers. In each swipe- Item you can customize the content you want. Initializing Swiper requires a simple line of code, passing in the outermost DOM of Swiper, as shown below:

import Swiper from 'light-swiper'

const mySwiper = new Swiper(document.querySelector('.light-swiper'));
Copy the code

In addition, we need some simple CSS styles:

.light-swiper {
  overflow: hidden;
  position: relative;
}

.swiper-wrap {
  overflow: hidden;
  position: relative;
}

.swipe-item {
  float: left;
  width: 100%;
  position: relative;
}
Copy the code

Custom configuration options

Slide to select the second parameter: [options]

parameter instructions type The default value
startSlide The default index location int 0
speed Animation execution time int 300
auto Whether to play automatically, pass in the switching time int –
continuous Whether to loop boolean false
width The width of a single swipe, generally used when you need to preview multiple swipe int –
offset Offset from the left, generally used when multiple swipe previews are required int –
disableScroll Disable all touch events for Swiper boolean false
stopPropagation Prevents events from bubbling boolean false
callback Event callback Function (index, currentEl)
transitionEnd Animation completion event Function (index, currentEl)
swiping Called when swiping using a percentage (0-1) of the full width that has been brushed 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) {}});Copy the code

API

Light-swiper exposes the following APIS for controlling swiping:

Prev () slides to the previous page

Next () slides to the next page

GetPos () returns the index of the current location

GetNumSlides () returns the total number of sliders

Kill () Destroys the current Swiper instance

compatibility

Swipe is now compatible with all browsers, including IE7 +. Swipe works best with devices that support CSS transformations and touches, but can be used without them. Some helper methods determine touch and CSS transformation support and select the appropriate animation method accordingly.

Who is using Swipe

  • CNN
  • Craigslist
  • Airbnb
  • NHL
  • …