H5頁面(五)效果輪播圖之-------swiper.js外掛
swiper是一款輕量級移動裝置滑塊的js框架!
swiper 3.x主流偏向移動裝置!
注意:npm install --save swiper;需要以下方式引入:
第一步:import Swiper from "swiper"
第二步:import 'swiper/dist/css/swiper.css'
//因為npm打包的swiper在node_modules檔案裡,所有可以直接這樣引用
1. 下載swiper外掛: 官網http://www.swiper.com.cn/;
必須下載swiper.js/swiper.min.js;
選擇下載swiper.css/swiper.min.css;
2.在html頁面引入swiper.js/swiper.min.js和swiper.css/swiper.min.css;
3.案例:
<link rel="stylesheet" type="text/css" href="../css/swiper-4.2.2.min.css">
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
<!-- 導航等元件可以放在container之外 -->
<script src="../js/swiper-4.2.2.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', //2.Slides的滑動方向,可設定水平(horizontal)或垂直(vertical);
initialSlide: 1, //3.初始化顯示的swiper-slide,從下標為0的swiper-slide開始,預設為0;
speed: 300, //4.切換速度,即slider自動滑動開始到結束的時間(單位ms),也是觸控滑動時釋放至貼合的時間,預設300。
width: 500,
height: 500, //5.制Swiper的高/寬度(px),當你的Swiper在隱藏狀態下初始化時且切換方向為垂直才用得上。這個引數會使自適應失效。
autoHeight: true, //6.自動高度。設定為true時,wrapper和container會隨著當前slide的高度而發生變化。
preloadImages: true, //7.預設為true,Swiper會強制載入所有圖片。
autoplay: { //8.自動播放
delay: 3000, //8.1自動播放間隔時間
stopOnLastSlide: false, //8.2切換到最後一個是否停止,但是在loop:true下無效果;
disableOnInteraction: true, //8.3使用者觸碰,懸停,拖放是否自動播放停止,預設為true;
reverseDirection: true, //8.4 是否開啟反向輪播,預設為false
},
document.getElementById("#d1").onclick = function() { //9.按鈕開啟/關閉自動輪播效果
mySwiper.autoplay.stop();
mySwiper.autoplay.start();
}
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
onSlideChangeEnd: function(swiper) { mySwiper .update(); //更新Swiper,這個方法包含了updateContainerSize,updateSlidesSize,updateProgress, updatePagination,updateClasses方法。也就是資料改變是重新初始化一次swiper mySwiper .startAutoplay(); //重新開始自動切換; mySwiper .reLoop(); //重新對需要迴圈的slide個數進行計算,當你改變了slidesPerView引數時需要用到,需要自動輪播的時候必須要加上; }
})
</script>