輪播swiper配置選項--前端小技巧
阿新 • • 發佈：2019-02-06
本文主要介紹了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>