Home > Article > Web Front-end > How to use Swiper to implement page image carousel

How to use Swiper to implement page image carousel

亚连Original: 2018-06-14 17:04:012252browse

This article mainly introduces in detail the effect of image carousel on mobile pages based on Swiper. It has certain reference value. Interested friends can refer to

Using Swiper to develop mobile pages. , easily implement image carousel.

swiper

1. Mainly includes modules:

swiper: refers to sliding , switching (the entire sliding object, sometimes specifically refers to the process (transition) in which the slider still moves forward until it fits the edge after being released)
container: refers to the container (swiper's container includes a collection of slides (wrapper) ), pagination, forward button, etc.)
wrapper: refers to the collection of (touched objects, touchable areas, and moving blocks, which will cause displacement with the slide switching during transition)
slider: refers to Slider (one of the switched blocks, 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 the active one, Activated (visible slide is active. When there is more than one visible slide, the leftmost one is active by default)
callback: refers to the 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, swiper must be introduced. css, swiper.js and jQuery

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

In Vue How to implement event-responsive progress bar component

How to use Dom elements in jQuery?

JavaScript Mediator Mode (detailed tutorial)

The above is the detailed content of How to use Swiper to implement page image carousel. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Bus in Vue component communicationNext article：How to use Bus in Vue component communication

See more

How to use Swiper to implement page image carousel

Related articles