How to use swiper mobile carousel plug-in

This article mainly introduces the swiper mobile carousel plug-in in detail. After touching the picture, the carousel stops, which has a certain reference value. Interested friends can refer to the example of this article

I have shared the swiper mobile carousel plug-in for your reference. The specific content is as follows

The following are the problems I encountered and several parameters commonly used with this plug-in. If your carousel does not require a lot of It’s complicated, you can solve it by reading this article. If you want to know more, here is the official address of the swiper plug-in.

The first stepIntroducing swiper.min.js

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

The second stephtml

<p class="swiper-container">
  <p class="swiper-wrapper">
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner1.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner2.jpg">
    </p>
    <p class="swiper-slide">
      <img alt="" src="http://wx.okair.net/wxpic/wxb2c/indexpage/index_banner3.jpg">
    </p>
  </p>
  <p class="swiper-pagination"></p> <!--需要轮播序号的时候写-->
</p>

The third step StepCalling (here’s the point)

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000
});

Now in this case, the picture can be automatically rotated, but when it is touched by hand, the rotation will stop, so you need to add another parameter

var mySwiper = new Swiper('.swiper-container', {
    pagination : '.swiper-pagination',
    loop : true,
    autoplay : 3000,
    autoplayDisableOnInteraction : false  /* 注意此参数，默认为true */ 
});

No matter how you slide, the carousel event will be retriggered.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement snow animation effect in jQuery

How to implement list pull-down refresh in WeChat applet Pull loading effect?

How to use the digital scroll plug-in in WeChat mini program

The above is the detailed content of How to use swiper mobile carousel plug-in. For more information, please follow other related articles on the PHP Chinese website!