demo:
截图:
结构:
1、swiper-progress.html
2、css文件夹
-swiper.css
-swiper.min.css
3、js文件夹
-swiper.min.js
-swiper.js
swiper-progress.html
移动端左右滑动demohtml, body {
position: relative;
height: 100%;
}
body {
-webkit-tap-highlight-color:rgba(255,0,0,0);
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 Slide 9 Slide 10 Slide 11 Slide 12 Slide 13 Slide 14 Slide 15var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
type: 'progressbar',
},
});
window.onload = function(){
document.body.addEventListener("touchmove",function(event){
event.preventDefault();
});
};
*上面加入了禁止微信下拉的js,适合不会产生滚动条的页面,如果你的页面会有滚动条,请把禁止微信下拉的js去掉,否则滚动条就被卡住不能往下拉了。
更多推荐
HTML实现滑动切换页面,html+js(swiper.js)+css左右滑动切换页面效果,适配移动端
发布评论