非常优秀的JS图片轮播插件Swiper的用法


Posted in Javascript onJanuary 03, 2017

最近在一个微信公众号中用到了swiper图片轮播插件。接下来为大家介绍插件的用法

首先需要下载Swiper

1:加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
  ...
  <script src="path/to/swiper.min.js"></script>
</body>
</html>

2.HTML内容。

<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之外

3.你可能想要给Swiper定义一个大小,当然不要也行。

.swiper-container {
  width: 600px;
  height: 300px;
}

4.初始化Swiper:最好是挨着</body>标签

<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内容的后面,则需要在页面加载完成后再初始化。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>
或者这样(jQuery和Zepto)
<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

以上所述是小编给大家介绍的非常优秀的JS图片轮播插件Swiper,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
JavaScript函数详解
Nov 17 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
深入浅析同源策略和跨域访问
Nov 26 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
JavaScript动态绑定详解
Sep 14 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
学习Vue组件实例
Apr 28 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 #Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 #Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 #Javascript
使用Angular缓存父页面数据的方法
Jan 03 #Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 #Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 #Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 #Javascript
You might like
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript控制table某列不显示的方法
2015/03/16 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
行政复议决定书
2015/06/24 职场文书
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
MySQL三种方式实现递归查询
2022/04/18 MySQL