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!