多平台统一管理软件接口,如何实现多平台统一管理软件接口
334
2023-04-20
移动端触摸滑动插件swiper使用方法详解
Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api
/*假设设计稿是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//前一个和后一个延迟加载
})
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~