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>

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

查看全文

相关阅读:
至最近写的微博记录(一)
对古人“一命二运三风水，四积德五读书”的人生命运总结的理解
 福建省获得央行颁发的非金融机构支付业务许可牌照的公司(至20120801)
替信息系统运维工作正名
 在信息系统运维开发中，对MVC框架认识上的一种变通
 Elasticsearch 从入门到学会之六（索引API特殊管理）
Python的Web项目实现 Flask
python的方法整理
 Shell脚本
 各种测试场景case整理

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