Use swipe.js in zepto to create carousel images with swipeUp and swipeDown not working

Use swipe.js in zepto to create carousel images with swipeUp and swipeDown not working_javascript skills

WBOY

Release： 2016-05-16 15:42:01

Original

2062 people have browsed it

In mobile web development, due to the small mobile interface, carousels are often used in order to display more pictures and the mobile traffic problem also needs to be taken into consideration. After consulting others and Baidu, I personally feel that swipe.js is better. use.

It is a pure javascript tool that does not need to be imported with other js libraries. It is also compatible with jQuery and zepto. The compressed version is only 6kb in size and is suitable for mobile development. Its git address: https://github .com/thebird/swipe

The usage method on git is quite clear. The key code is as follows

<div id='slider' class='swipe'>
 <div class='swipe-wrap'>
  <div></div>
  <div></div>
  <div></div>
 </div>
</div>
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
}
.swipe-wrap {
 overflow: hidden;
 position: relative;
}
.swipe-wrap > div {
 float:left;
 width:100%;
 position: relative;
}

Copy after login

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

Copy after login

It is best not to change the html tree model of .swipe nested .swipe-wrap. As for the innermost div, you can replace it with others, such as li, etc.

Only a few pieces of code are needed to complete the production of the carousel. However, in the actual project, especially the banner at the top of the homepage, the page index needs to be added, and the parameters of the control need to be configured. , Its main parameter configuration is as follows:

startSlide Integer (default:0) - The position to start scrolling

speed Integer (default:300) - animation scrolling interval (seconds)

auto Integer - Start automatic slideshow (time between slides in milliseconds)

continuous Boolean (default:true) - Create an infinite loop (whether to slide in a loop when all animations end)

disableScroll Boolean (default:false) - whether to stop the slide scrolling when scrolling the scroll bar

stopPropagation Boolean (default:false) - whether to stop event bubbling

callback Function - callback function during slideshow running

transitionEnd Function - callback function when the animation ends

And his main api functions are as follows:

prev()：Previous page

next(): next page

getPos(): Get the index of the current page

getNumSlides(): Get the number of all items

slide(index, duration): sliding method

The following is the actual code used in the project

<div class="banner">
      <div id="slider" class="swipe">
        <ul class="swipe-wrap">
          <li>
            <a href="javascript:void(0)">
              <img src="img/1.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/2.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/3.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/4.jpg">
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <img src="img/5.jpg">
            </a>
          </li>
        </ul>
        <ul class="slide-trigger">
          <li class="cur"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
.banner {
        width: 100%;
        position: relative;
      }
      .banner .swipe {
        overflow: hidden;
        position: relative;
      }
      .banner .swipe-wrap {
        overflow: hidden;
        position: relative;
        list-style: none;
      }
      .banner .swipe-wrap li {
        float: left;
        position: relative;
      }
      .banner img {
        width: 100%;
        vertical-align: middle;
      }
      .banner .slide-trigger {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        list-style: none;
      }
      .banner .slide-trigger li {
        width: 10px;
        height: 10px;
        background: #FFF;
        margin: 5px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
      }
      .banner .slide-trigger .cur {
        background: #2fc7c9;
      }
var slider = $('#slider');
    slider.find(".slide-trigger").find("li").eq(0).addClass("cur");
    window.mySwipe = new Swipe(document.getElementById('slider'), {
      speed: 400,
      auto: 3000,
      callback: function(index, elem) {
        slider.find(".slide-trigger").find("li").eq(index).addClass("cur").siblings().removeClass("cur");
      }
    });

Copy after login

SwipeUp and swipeDown in zepto have no effect

I was watching zepto, and when I saw some events in it, I found a problem:

$(‘body').swipeUp(function(e){
alert(‘swipeUp');//偶尔有效
})
$(‘body').swipeDown(function(e){
alert(‘swipeDown');//偶尔有效
})
$(‘body').tap(function(){
alert(‘tap');//ok
})
$(‘body').swipeLeft(function(){
alert(‘swipeLeft');//ok
})
$(‘body').swipeRight(function(){
alert(‘swipeRight');//ok
})

Copy after login

On the mobile terminal, swipeUp and swipeDown have no effect, but the other ones work. What's going on?

Solution 1:

Zepto needs to introduce the touch.js module. It is not available on the official website. Go to github to download it and then introduce touch.js

Solution 2:

is because the browser's default pull-down event is blocked, and the following code is added.

document.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);

Copy after login