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.案例：

<style>

.swiper-container {

width: 600px;

height: 300px;

}

</style>

</head>

<body>

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

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>

H5页面（五）效果轮播图之-------swiper.js插件

猜你喜欢