swiper的理解
参考：Swiper中文网
Swiper使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
</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>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<!--导航等组件可以放在container之外--> <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', //水平方向
loop: true, //循环 // 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
</html>
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
2.添加HTML内容。
3.你可能想要给Swiper定义一个大小，当然不要也行。
4.初始化Swiper：最好是挨着</body>标签。
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>
或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。
*建议不使用Source Map功能，请把js压缩文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 删掉。以免在某些浏览器出现以下提示：
如需要使用Source Map，演示包里面有该map文件，请放在相应的位置
================================================================================
二、选项和参数 介绍：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide{
background: blueviolet;
color: #FFF;
line-height: 300px;
font-size: 20px;
text-align: 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>
<!-- 如果需要分页器(下边的点点) -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮（左右的箭头按钮） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条（下边的滚动条） -->
<div class="swiper-scrollbar"></div>
</div>
<!--导航等组件可以放在container之外-->
<script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
//initialSlide 设定初始化时slide的索引(即开始的位置为第几个)。
initialSlide :2, //把第三个作为首个显示 //direction: Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
//direction:'vertical', //垂直方向滑动
direction:"horizontal", //水平方向滑动 //自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
autoplay : 3000, //滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。默认：300
speed: 300, //设置为true 则开启loop模式
loop : true,
slidesPerView : "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。
loopedSlides :8, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。 // 如果需要分页器
pagination: '.swiper-pagination',
paginationClickable :true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。 // 如果需要前进后退按钮
nextButton: '.swiper-button-next', //前进按钮的css选择器或HTML元素。
prevButton: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。 // 如果需要滚动条
scrollbar: '.swiper-scrollbar', //添加滚动条
scrollbarHide : false, //滚动条是否自动隐藏。默认：true会自动隐藏。
scrollbarDraggable : true , //该参数设置为true时允许拖动滚动条。
scrollbarSnapOnRelease : true , //如果设置为true，释放滚动条时slide自动贴合。 //zoom
//焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。
//需要在slide中增加类名swiper-zoom-container，结构如下：
//<div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image"> </div> </div>
//zoom : true, })
</script>
</body>
</html>
更多选项-参数请参考：配置选项API
swiper下载链接：下载Swiper
swiper的理解的更多相关文章
- 奖品列表组件【仿swiper】
最近lz在做项目的一些优化,发现我的项目里有个奖品列表的功能:我们之前是引入swiper这个库去做的:swiper库的滑动效果确实比较好看,但是js文件以及css文件相对是比较大的:考虑到这个小小的需 ...
- 小程序开发基础-swiper 滑块视图容器
小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...
- 【swiper】 滑块组件说明
swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...
- 我理解的关于Vue.nextTick()的正确使用
什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 我理解的官方文档的这句话的侧重点在最后那半 ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 小程序内置组件swiper，circular（衔接）使用小技巧
swiper,关于滑块的一些效果无缝,断点,视差等等...我想这里就不用做太多的赘述,这里给大家分享一下实战项目中使用circular(衔接)的一点小特性.小技巧,当然你也可以理解为遇到了一个小坑,因 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 彻底理解AC多模式匹配算法
(本文尤其适合遍览网上的讲解而仍百思不得姐的同学) 一.原理 AC自动机首先将模式组记录为Trie字典树的形式,以节点表示不同状态,边上标以字母表中的字符,表示状态的转移.根节点状态记为0状态,表示起 ...
- 理解加密算法（三）——创建CA机构，签发证书并开始TLS通信
接理解加密算法(一)--加密算法分类.理解加密算法(二)--TLS/SSL 1 不安全的TCP通信 普通的TCP通信数据是明文传输的,所以存在数据泄露和被篡改的风险,我们可以写一段测试代码试验一下. ...
随机推荐
- 数位DP毕业题
原题 题意 给一个 $64$ 位的二进制数,求小于这个数的回文二进制数的数量. 题解 加强版 题意 同上,但允许一个数最多有 $k$ 位不是回文(即把任意 $k$ 位取反后这个数是一个回文数),这种数 ...
- [openmp]使用嵌套互斥锁锁定变量
本文出自:http://www.cnblogs.com/svitter 转载请注明出处. 如果有一个线程必须要同时加锁两次,只能用嵌套型锁函数 函数名称 描述 void omp_init_nest_l ...
- 封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataT ...
- Shell中的单引号（‘）双引号（”）和反引号（·）
在bash中,$.*.?.[.].’.”.`.\.有特殊的含义.类似于编译器的预编译过程,bash在扫描命令行的过程中,会在文本层次上,优先解释所有的特殊字符,之后对转换完成的新命令行,进行内核的系统 ...
- Python学习杂记_7_文件操作
文件操作 Python3用open()方法打开文件并返回文件句柄,有了文件句柄就可以对文件进行各种操作了. 打开文件: open(“文件名” , 打开方式) 如: f=open( ...
- TDictionary字典 对象的释放。。。
type TRen = record name: string; age: Integer; end; type TPeople = class private Fname: string; Fage ...
- 初探ggplot2 geom__制作面积图
大家大概都对如下信息图并不陌生,该图用100%堆积面积图的方式来表现不同时期不同国家人数所占的比例.这是一种很有意思的表达方式,而面积图也是很常用的数据图表,现在让我们一起来看看如何在R里用g ...
- workflow engine Ruote初体验之一（概念）
由于最近自己写点小东西,需要有工作流程管理方面的应用,所有的环境为Ruby on rails,所有在选择流程引擎的时候选择了ruote,但是对于ruote是完全陌生的,所以在这里记下点滴,如果理解的不 ...
- Aria2使用教程
Aria2 是一个轻量级多协议和多源命令行下载实用工具.它支持 HTTP / HTTPS, FTP, SFTP, bt 和 Metalink.通过内置 Aria2 可以操作 json - rpc 和 ...
- mysql之count,max,min,sum,avg,celing，floor
写在前面 昨天去青龙峡玩了一天,累的跟狗似的.不过还好,最终也算登到山顶了,也算来北京后征服的第三座山了.这里也唠叨一句,做开发这行,没事还是多运动运动,对自己还是很有好处的,废话少说,还是折腾折腾s ...