Swiping touch moving end, the slide for content

Plug-in features

swipe.js is a more famous touch slide plug-in that can handle content slide, support for custom options, you can let it automatically scroll, scroll control interval, return the callback function and so on. Often seen in the mobile front-end development of.

Instructions

The following is a simple example of use, add the appropriate HTML codes and js code.

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

window.mySwipe = Swipe(document.getElementById('slider'));

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

Setting Options

• startSlide  Integer  (default: 0)  - start rolling position
• Speed  Integer  (default: 300)  - animation scroll interval (in seconds)
• Auto  Integer - an automatic slideshow starts (the time in milliseconds between the slide units)
• the Continuous  Boolean  (default: to true)  - create an infinite loop (if the loop slide at the end when all the animation to slide)
• disableScroll  Boolean  (default: false)  - When the scroll bar to scroll whether to stop the slide
• stopPropagation  Boolean  (default: false)  - whether to stop the event bubbling
• callback  Function - The callback function slide running
• transitionend  Function - the animation runs end callback function

Examples

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

note

1, the original Swipe JS, when you use a click or gesture control after, carousel map will not automatically scroll the current page sina.cn also the design logic, but some customers do not give him an automatic scroll psychology is not comfortable, the solution is to modify the original swipe.js the stop function is as follows:

function stop() {
    //delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

The following demo page is modified, it would have been in a rolling state. ( Source )

Demos and Downloads

download link

Reproduced in: https: //www.cnblogs.com/zijuan/p/4065409.html