Swiper之滑块2

Posted 2020-08-13 冷的锋刃

tags:

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

对比之前Swiper滑块1来说，我们添加一下背景颜色来看看：

<!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之滑块2</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; } </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\',{ loop: true, autoplay: 3000, }); </script> </body> </html>

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

Material Design Lite组件之滑块

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