Swiper之滑块3

Posted 2020-08-13 冷的锋刃

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Swiper之滑块3相关的知识，希望对你有一定的参考价值。

上章Swiper滑块2、Swiper滑块1都是手动的，这章我们来自动的！

其实只是加了Swiper的speed（滑动速度即slider自动滑动开始到结束的时间）属性而已(∩_∩)，单位是ms

<script> 
var mySwiper = new Swiper(\'.swiper-container\',{
autoplay : 3000,
speed:300,
})
</script>

我们来看看speed的参数：

类型：	number
默认：	300
举例：	1000

上代码：

<!DOCTYPE <a href="https://it.cha138.com/html/" target="_blank"><strong class="keylink">html</strong></a>> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="renderer" content="webkit"> <title>Swiper之滑块3</title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper2.min.css">  <style> * { margin: 0; padding: 0; } .blue-slide { background: #4390EE; } .red-slide { background: #CA4040; } .orange-slide { background: #FF8604; } .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center; } element.style { transform: translate3d(-800px, 0px, 0px); transition-duration: 2000ms; } #swiper-container3 .swiper-wrapper { transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); } .swiper-container-<a href="https://it.cha138.com/android/" target="_blank"><strong class="keylink">android</strong></a> .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate(0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide blue-slide">第一页</div> <div class="swiper-slide red-slide">第二页</div> <div class="swiper-slide orange-slide">第三页</div> </div> </div> <script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script> <script type="text/<a href="https://it.cha138.com/javascript/" target="_blank"><strong class="keylink">javascript</strong></a>"> var mySwiper = new Swiper(\'.swiper-container\',{ autoplay : 3000, speed:300, }); </script> </body> </html>

以上是关于Swiper之滑块3的主要内容，如果未能解决你的问题，请参考以下文章

Swiper之滑块2

Swiper之滑块

selenium之滑块验证码破解代码详解

登录校验之滑块验证码完整实现（vue + springboot）

验证码之滑块验证码

Material Design Lite组件之滑块