轮播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>
<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>
jquery自动轮播图代码
<!--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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。