非常优秀的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 尚未实现错误解决办法
Nov 27 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
js换图片效果可进行定时操作
Jun 09 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
React学习之事件绑定的几种方法对比
Sep 24 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript 继承的实现
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
详解python的四种内置数据结构
2019/03/19 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Pycharm小白级简单使用教程
2020/01/08 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
M.M.LaFleur官网:美国职业女装品牌
2020/10/27 全球购物
无偿献血倡议书
2014/04/14 职场文书
贷款担保申请书
2014/05/20 职场文书
学校安全管理责任书
2014/07/23 职场文书
客户答谢会活动方案
2014/08/31 职场文书
甘南现象心得体会
2014/09/11 职场文书
个人年终总结开头
2015/03/06 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
python实现手机推送 代码也就10行左右
2022/04/12 Python