Swiper之滑块1 - 走看看

zoukankan html css js c++ java

Swiper之滑块1

之前介绍过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 html 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 { 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>

不努力，还要青春干什么？

查看全文

相关阅读:
React.memo()使用教程
 React组件什么时候render
redux-thunk使用教程
 Redux数据持久化
 Mac 中安装 nvm: 切换Node 不同版本
 上传文件类型选择
 Python获取软件安装列表
 Java读取text文件
 负载均衡
 远程调用

原文地址：https://www.cnblogs.com/caidupingblogs/p/5911046.html