How to implement automatic unlimited picture rotation with swiper-JS Tutorial-php.cn

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 code

Document

Copy after login

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

--首先定义一个容器

--添加图片

--小圆点分页器

--上一页

--下一页

Copy after login

If you want it to move, then continue writing js

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效果的轮播 })

Copy after login

Swiper carousel also has its advantages:

　1.Swiper is a sliding special effects plug-in created purely with

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!

There are also shortcomings: (When using the Swiper carousel plug-in ajax request to load images, the problem cannot be slid)

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 })

Copy after login

Swiper has rich API interfaces. (But there are not many Chinese documents, so I couldn’t find them.) It allows developers to generate their own unique pagination, up and down slider buttons

, and four

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 code

Copy after login

script code

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!