非常优秀的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 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
Apr 15 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
React学习笔记之列表渲染示例详解
Aug 22 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue实现点击按钮下载文件功能
Oct 11 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery中:image选择器用法实例
2015/01/03 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
js最简单的双向绑定实例讲解
2018/01/02 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
解析Python中while true的使用
2015/10/13 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python一键去抖音视频水印工具
2018/09/14 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python随机数函数代码实例解析
2020/02/09 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
大学军训通讯稿
2014/01/13 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
李敖北大演讲稿
2014/05/24 职场文书
大学生应聘求职信
2014/05/26 职场文书
高一军训的心得体会
2014/09/01 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
2014年质检工作总结
2014/11/26 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
立项申请报告范本
2015/05/15 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书