Detailed explanation of mobile h5 carousel plug-in swipe example

swipe.js is a lightweight js touch sliding class library - Swipe JS. This is a very small javascript class library, but its function is not simple. It can be used to display any content on the web page, supports precise touch movement operations, and can also set up automatic playback, proportional scaling, etc. Practical functions.

In mobile h5 pages, we often have the need for carousel images. If you don’t need too many effects, just simple finger sliding and automatic rotation effects, I prefer the swipe plug-in, but Baidu The search for this plug-in is not complete. I will add the functions you may need.

Swipe function introduction

The following will introduce how to use Swipe JS. Swipe has the following parameters:

startSlide: 4,  //起始图片切换的索引位置
auto: 3000, //设置自动切换时间，单位毫秒
continuous: true,  //无限循环的图片切换效果
disableScroll: true,  //阻止由于触摸而滚动屏幕
stopPropagation: false,  //停止滑动事件
callback: function(index, element) {},  //回调函数，切换时触发
transitionEnd: function(index, element) {}  //回调函数，切换结束调用该函数。

In addition, there are some comparisons Commonly used API methods, for example:

prev()：上一页
next()：下一页
getPos()：获取当前页的索引
getNumSlides()：获取所有项的个数
slide(index, duration)：滑动方法

Swipe usage

After understanding the basic function methods, let’s take a look at how to use them.

First the HTML structure:

<p id="slider" class="swipe">
  <p class="swipe-wrap">
    <p></p>
    <p></p>
    <p></p>
  </p>
</p>

Then the style code:

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

Finally set the JS binding and parameter settings:

var slider = Swipe(document.getElementById('slider'), {
   …………
   …………
});

Here just put The function parameters introduced above can be written in it to achieve the corresponding functions.

Finally we can also add up and down buttons to the sliding switch:

<button onclick="Swipe.prev()">prev</button>
<button onclick="Swipe.next()">next</button>

In addition, I will add some paginator effects:

If you need the effect of the paging point, You can add the code like this:

The nav tag part is the relevant part of the paginator. There are as many li tags as there are slides (if you need pagination effect, just add a nav and ul tag, because it represents The li tag of the paging point needs to be generated dynamically, if you add the carousel module dynamically!)

<nav>
    <ul id="position">
      <!-- <li class="on"></li>
      <li class=""></li>
      <li class=""></li>
      <li class=""></li> -->
    </ul>
</nav>

The corresponding instantiation code (children's shoes with a more simplified writing method can use their own method):

var slider = Swipe(document.getElementById('slider'), {
                    auto: 3000,
                    continuous: true,
                    callback: function(pos) {
                        var i = bullets.length;
                        while (i--) {
                            bullets[i].className = ' ';
                        }
                        bullets[pos].className = 'on';
                    }
                });
var slides = document.querySelectorAll('.swipe-wrap figure').length;
var liBox = document.getElementById('position');
var liTab;
for (var i = 0; i < slides; i++) {
    liTab = document.createElement('li');
    if (i == 0) {
        liTab.className = 'on';
    }
    liBox.appendChild(liTab);
};
var bullets = document.getElementById('position').getElementsByTagName('li');

There is another key point. This plug-in will stop after sliding your finger over the slide module once and will no longer automatically rotate. At this time, you need to modify the source code in swipe.js:

In this way, this plug-in can basically run normally and meet your most basic needs.

Related recommendations:

How to use Swiper on the mobile terminal

vue swiper implements component-based development in detail

Introduction to the usage of Swiper in JS

The above is the detailed content of Detailed explanation of mobile h5 carousel plug-in swipe example. For more information, please follow other related articles on the PHP Chinese website!