非常优秀的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 相关文章推荐
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
js自定义回调函数
Dec 13 Javascript
JavaScript Split()方法
Dec 18 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
本地存储localStorage用法详解
Jul 31 Javascript
快速解决element的autofocus失效问题
Sep 08 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
php一些公用函数的集合
2008/03/27 PHP
php 正则匹配函数体
2009/08/25 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
Smarty模板语法详解
2019/07/20 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
JS判断浏览器类型与操作系统的方法分析
2020/04/30 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
详解python3中zipfile模块用法
2018/06/18 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
2014三八妇女节活动总结
2014/03/01 职场文书
购房协议书范本
2014/04/11 职场文书
企业宣传标语
2014/06/09 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
开工典礼致辞
2015/07/29 职场文书