Home >Web Front-end >JS Tutorial >Swiper implements mobile advertising image rotation

Swiper implements mobile advertising image rotation

php中世界最好的语言Original: 2018-04-13 13:44:132063browse

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:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<p class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <p class="swiper-wrapper"> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 <p class="swiper-slide"><img src="Walks-poster.png"></p> 
 </p> 
 <p class="swiper-pagination" style="width: 100px;float: right"></p><!--分页器-->、 
 <p class="swiper-button-prev"></p><!--前进按钮--> 
 <p class="swiper-button-next"></p><!--后退按钮--> 
</p> 
 
<script type="text/javascript"> 
 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> 
</body> 
</html>

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!

Swiper implements mobile advertising image rotation

Related articles