Swiper implements mobile advertising image rotation

This time I will bring you Swiper to implement mobile advertising image carousel. What are the precautions for Swiper to implement mobile advertising image carousel. The following is a practical case. Let’s take a look. .

1. Mainly includes modules:

swiper: refers to sliding and switching (the entire sliding object, sometimes specifically refers to the process in which the slider still moves forward after being released until it fits the edge (transition))
container: refers to the container (swiper's container includes the sliding fast (slide) Collection (wrapper), pagination (pagination), forward button, etc.)
wrapper: refers to a collection containing (touchable objects, touchable areas, and moving blocks, which will cause displacement with the slide switch during transition)
slider: refers to the slider (one of the switched blocks, which can contain text, pictures, html elements or another swiper
pagination: refers to the paginator (indicates the number of slides and the currently active slide) )
active: refers to active, activated (visible (visible) slide is active, when there is more than one visible slide, the leftmost one is active by default)
callback: refers to callback function (triggered under certain circumstances)

2. Simple carousel, as shown below:

nbsp;html> 
 
 
 <meta> 
 <title></title> 
 <link> 
 <script></script> 
 <script></script> 
 
 
<p><!--swiper容器[可以随意更改该容器的样式--> 
 </p><p> 
 </p><p><img  src="/static/imghwm/default1.png" data-src="Walks-poster.png" class="lazy" alt="Swiper implements mobile advertising image rotation" ></p> 
 <p><img  src="/static/imghwm/default1.png" data-src="Walks-poster.png" class="lazy" alt="Swiper implements mobile advertising image rotation" ></p> 
 <p><img  src="/static/imghwm/default1.png" data-src="Walks-poster.png" class="lazy" alt="Swiper implements mobile advertising image rotation" ></p> 
  
 <p></p><!--分页器-->、 
 <p></p><!--前进按钮--> 
 <p></p><!--后退按钮--> 
 
 
<script> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路（即：可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
 

3. Other parameters in js:

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果：（1）fade:淡入淡出；（2）cube:立方体；（3）coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布：1为在容器区域出现一张图；2：在容器区域出现两张图；3：在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左，设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值，值越大靠得越近*/ 
  depth:60,/*位置深度，值越大离Z轴越远，看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 })

Note: Before using swiper, you must introduce swiper.css, swiper.js and jQuery                                                            

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!

Recommended reading:

How to switch the arrow button with the swiper plug-in

How to use the Vue component communication Bus

The above is the detailed content of Swiper implements mobile advertising image rotation. For more information, please follow other related articles on the PHP Chinese website!