Swiper之滑块

Posted 2020-08-11 冷的锋刃

tags:

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

之前介绍过Swiper，它是一个神奇的插件。类似于android的触屏操作，Swiper应用于Web中也可以实现这样的效果，我们来看看（用鼠标可拖动）。

startSlide Integer (default:0) - 开始滚动的位置

speed Integer (default:300) - 动画滚动的间隔（秒数）

auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）

continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）

disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动

stopPropagation Boolean (default:false) - 是否停止事件冒泡

callback Function - 幻灯片运行中的回调函数

transitionEnd Function - 动画运行结束的回调函数

首先，我们初始化Swiper，返回初始化后的Swiper实例：

<!DOCTYPE <a href="https://it.cha138.com/html/" target="_blank"><strong class="keylink">html</strong></a> PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title> new document </title> <link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper.min.css"> <meta name="generator" content="editplus" charset="utf-8"/> <style> body { background: #eee; /*字体粗细*/ font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color:#000; margin: 0; padding: 0; } .swiper-container { width: 500px; height: 300px; margin: 20px auto; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /*父容器*/ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /*左右居中*/ /*Webkit高效稳定兼容性好，结构清晰易于维护*/ -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; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> </div> <script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script>  <script> var swiper = new Swiper(\'.swiper-container\'); </script> </body>

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

uniapp滑块视图容器swiper高度自适应 - 解决swiper显示不完整的问题

Swiper滑块SVG图标有时不会在角度材料svg图标中显示