1. First create a swiper operating environment. The files required are swiper.min.js and swiper.min.css files.
1 2 3 4 5 6 7 8 9 |
|
1 |
|
1 |
|
2. Write HTML content.
1 2 3 4 5 6 7 8 9 10 |
|
3. You may want to define a size for Swiper, but of course not.
1 2 3 4 |
|
4. Initialize Swiper: It is best to next to the tag (function call)
1 |
|
var swiper=new Swiper(' .swiper-container',{
autoplay:1000,//Automatic rotation
AutoplayDisableOnInteraction:false,//Continue scrolling after sliding
loop:true,///Loop
pagination:'.swiper -pagination',//pagination
paginationClickable:true,//small dot click
spaceBetween:30,///picture gap
direction:"horizontal"//default horizontal vertical vertical
})
1 2 |
|
The above is the detailed content of Introduction to the swiper plug-in and how to carousel images. For more information, please follow other related articles on the PHP Chinese website!