html 触控插件,移动端触摸滑动插件swiper使用方法详解

Swiper是移动端的一款非常强大的触摸滑动插件，下面代码只展示一些常用的配置，具体可以查看官网api

Document

/*假设设计稿是640 轮播图区域640*300*/

html{

font-size:100px;

}

html,body{

width:100%;

overflow-x:hidden;

}

.swiper-container{

margin:0 auto;

height:3rem;

overflow:hidden;

}

.swiper-slide{

height:3rem;

}

.swiper-slide img{

width:100%;

height:100%;

}

//REM 响应式

~function(){

var desN = 640,winW = document.documentElement.clientWidth,ratio = winW / desN;

document.documentElement.style.fontSize = ratio*100 + "px";

}();

//初始化swiper实现区域的滑动

//new Swiper([container selector],[settings])

var swiper1 = new Swiper('.swiper-container',{

loop:true,//无缝衔接滚动

effect:'cube',//滑动效果

autoplay:3000,

autoplayDisableOnInteraction:false,//用户操作swiper之后不禁止autoplay

pagination:'.swiper-pagination',

paginationType:'progress',//分页器样式

lazyLoading:true,//图片延迟加载

lazyLoadingInPrevNext:true//前一个和后一个延迟加载

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。