非常优秀的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+FSO遍历文件夹下文件并显示
Mar 07 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
手机端转换rem适应
Apr 01 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue-cli 目录结构详细讲解总结
Jan 15 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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! Passport 通行证整合
2008/03/27 PHP
基于Windows下Apache PHP5.3.1安装教程
2010/01/08 PHP
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
layui表格数据重载
2019/07/27 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python+opencv3生成一个自定义纯色图教程
2020/02/19 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
高等教育学自荐书范文
2014/02/10 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
党建工作经验交流材料
2014/05/25 职场文书
好人好事演讲稿
2014/09/01 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python