Swiper之滑块4

Posted 2020-08-13 冷的锋刃

tags:

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

最炫3D走一波：

<!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" /> <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; } .green-slide{ background: #00FF7F; } .violet-slide{ background: #A020F0; } .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 class="swiper-slide green-slide">第四页</div> <div class="swiper-slide violet-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\',{ effect : \'coverflow\', slidesPerView: 3, centeredSlides: true, }); </script> </body> </html>

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

Material Design Lite组件之滑块

串口屏开发之滑块控件的使用总结——如何通过滑动滑块实现进度条和文本的联动效果