This paper mainly introduces the swiper configuration options, including unlimited scrolling, lazy loading, monitoring the current position, page up and down, transition animation gradient, delay loading pictures, automatic rotation, etc;
Case diagram: 
Front end code:
Tips: because JQ is the rigid demand of the front end, the demonstration here uses the lightweight swiper.jquery.min.js that calls JQ. If JQ is not referenced, please change the path to swiper.min.js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="public/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
/*Control the height of swiper components*/
/*height: 450px;*/
max-height: 60vh;
}
.swiper-slide {
/* Center slide text vertically */
/*The application of flex in elastic box*/
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
/*swiper Picture in container*/
.swiper-slide img{
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--data-src Lazy load-->
<img data-src="public/img/timg0.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src Lazy load-->
<img data-src="public/img/timg1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src Lazy load-->
<img data-src="public/img/timg2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!--jQ-->
<script src="public/js/jquery-2.1.4.min.js"></script>
<!-- Swiper JS -->
<script src="public/js/swiper.jquery.min.js"></script>
<!-- Initialize initialization Swiper -->
<script>
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//Optional, show pager or not
paginationClickable: true,//Optional option, click pager to slide
lazyLoading : true,//Lazy load or not
lazyLoadingInPrevNext : true,//Optional, set to true to allow delayed loading to be applied to pictures in the closest slide
autoplay: 3000,//Optional, automatic sliding time, 1000 is 1 second
speed:2000,//Optional, rate of page flip
initialSlide :1,//Optional, initial page, default 0
//Direction: 'vertical', / / optional option, rolling direction, default level
//Parallax: true, / / optional, parallax
//Next button: '. Swiper button next', / / next page
//Prev button: '. Swiper button prev', / / previous page
//Width: window.innerwidth, / / optional, full screen
effect : 'fade',//Optional, gradient animation
//onSlideChangeStart: function(swiper){
//alert(swiper.activeIndex);
//}, / / get the trigger function at the beginning of the current sequence number. If it is changed to onSlideChangeEnd, it will be triggered after the switch succeeds
loop: 1,//Infinite scrolling or not
//Click event
//onTap: function(swiper){
// alert('You tap Swiper ');
//}, / / on the mobile terminal, click will have a delay of 200-300 ms, so please use tap instead of click as the click event
});
//Customize previous page, next page
$('#btn1').click(function(){
swiper.slidePrev();
});
$('#btn2').click(function(){
swiper.slideNext();
});
})
</script>
</body>
</html>Code link:
http://download.csdn.net/download/qq_38209578/10163068
swiper official website link:
http://www.swiper.com.cn/demo/index.html