轮播swiper配置选项
本文主要介绍了swiper配置选项，包含了轮播的无限滚动、懒加载、监听当前位置、上下翻页、过渡动画渐变、延时加载图片、自动轮播等；
<!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%;
/*控制swiper组件的高度height*/
/*height: 450px;*/
max-height: 60vh;
}
.swiper-slide {
/* Center slide text vertically */
/*弹性盒子flex的应用*/
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容器内图片*/
.swiper-slide img{
width: 100%;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!--data-src懒加载-->
<img data-src="public/img/timg0.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src懒加载-->
<img data-src="public/img/timg1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<!--data-src懒加载-->
<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 初始化 Swiper -->
<script>
$(document).ready(function () {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',//可选选项，是否显示分页器
paginationClickable: true,//可选选项，是否点击分页器滑动
lazyLoading : true,//是否懒加载
lazyLoadingInPrevNext : true,//可选选项，设置为true允许将延迟加载应用到最接近的slide的图片
autoplay: 3000,//可选选项，自动滑动的时间,1000为1秒
speed:2000,//可选选项，翻一页切换的速率
initialSlide :1,//可选选项，初始的页面，默认0
//direction : 'vertical',//可选选项，滚动的方向，默认水平
//parallax : true,//可选选项，视距差
//nextButton: '.swiper-button-next',//下一页
//prevButton: '.swiper-button-prev',//上一页
//width : window.innerWidth,//可选选项，全屏
effect : 'fade',//可选选项，渐变动画
//onSlideChangeStart: function(swiper){
//alert(swiper.activeIndex);
//},//获取当前的序号开始时触发函数，改为onSlideChangeEnd是切换成功后触发
loop: 1,//是否无限滚动
//点击事件
//onTap: function(swiper){
// alert('你tap了Swiper');
//},//在移动端，click会有 200~300 ms延迟，所以请用tap代替click作为点击事件
});
//自定义上一页、下一页
$('#btn1').click(function(){
swiper.slidePrev();
});
$('#btn2').click(function(){
swiper.slideNext();
});
})
</script>
</body>
</html>
