This time I will show you how to implement unlimited automatic picture rotation in swiper. What are theprecautions to realize unlimited automatic picture rotation in swiper? The following is a practical case, let's take a look.
Complete codeDocument
How to use swiper to write carousels
Everyone has written carousel pictures before, I believe you are writing carousel pictures I’ve probably been troubled by some of the details during the process. Next, I’ll tell you about a convenient and quick carousel chart! Swiper is often used for content touch sliding on mobile websites 1. The first step is to introduce the css---swiper.css plug-in and JQ---swiper.js plug-in, Then I started writing the carousel image--首先定义一个容器
--添加图片 --小圆点分页器 --上一页 --下一页
var mySwiper = new Swiper(".swiper-container",{ autoplay:1000,--每秒中轮播一次 loop:true,--可以让图片循环轮播 autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播 pagination:".swiper-pagination",--让小圆点显示 paginationClickable:true,--实现小圆点点击 prevButton:".swiper-button-prev",--实现上一页的点击 nextButton:".swiper-button-next",--实现下一页的点击 effect:"flip"--可以实现3D效果的轮播 })
javascript, which is oriented to mobile terminals such as mobile phones and tablets. 2.Swiper can achieve common effects such as touch screen focus image, touch screen Tab switching, touch screen multi-image switching, etc.
3.Swiper is open source, free, stable, simple to use, and powerful. It is an important choice for building mobile terminal websites!
Because the banner image is dynamically created, when the plug-in starts to initialize, there is no such thing in the document flow. Images are used, so the corresponding width is not created. By adjusting the js loading order, the problem is still not solved.
Finally found the swiper plug-in api, which has attributes that can be changed according to the content and automatically
initialize the plug-in. After adding observer: true, the problem is solved!
var mySwiper = new Swiper ('.swiper-container', { pagination: '.swiper-pagination', autoplay: 5000, loop: true, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper })
callback functions: 1.onTouchStart2.onTouchMove
3.ontouchend
4.onslideswitch.
The above content is my personal summary, I hope it will be helpful to you!
swiper carousel chart (reverse automatic switching is similar to an infinite loop)
swiper plug-in carousel chart. The default carousel sequence is from right to left. One picture, the second picture, the third picture, and then you can see with the naked eye that you rewind from the third picture from left to right to the first picture. This will make the visual experience not high, , but it can still be used. The characteristics of swiper itself are changed to an infinite loop carousel. HTML codeThe above is the detailed content of How to implement automatic unlimited picture rotation with swiper. For more information, please follow other related articles on the PHP Chinese website!