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>