Swiper 4.x 使用方法(移动端网站的内容触摸滑动)


Posted in Javascript onMay 17, 2018

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" href="path/to/swiper.min.css" rel="external nofollow" >
</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: {
   el: '.swiper-pagination',
  },
  
  // 如果需要前进后退按钮
  navigation: {
   nextEl: '.swiper-button-next',
   prevEl: '.swiper-button-prev',
  },
  
  // 如果需要滚动条
  scrollbar: {
   el: '.swiper-scrollbar',
  },
 })    
 </script>
</body>

如果不能写在HTML内容的后面,则需要在页面加载完成后再初始化(不推荐)。

<script type="text/javascript">
window.onload = function() {
 ...
}
</script>

或者这样(Jquery和Zepto)

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你,现在你的Swiper应该已经能正常切换了。

Javascript 相关文章推荐
javascript 动态加载 css 方法总结
Jul 11 Javascript
JavaScript中实现块作用域的方法
Apr 01 Javascript
javascript针对DOM的应用分析(四)
Apr 15 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
Sep 27 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
vue引用js文件的多种方式(推荐)
May 17 #Javascript
vue router+vuex实现首页登录验证判断逻辑
May 17 #Javascript
浅谈webpack-dev-server的配置和使用
May 17 #Javascript
Node.js模块全局安装路径配置方法
May 17 #Javascript
create-react-app修改为多页面支持的方法
May 17 #Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
PHP框架性能测试报告
2016/05/08 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
jquery事件与绑定事件
2017/03/16 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python实现人脸识别代码
2017/11/08 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
python从PDF中提取数据的示例
2020/10/30 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
办公室前台的岗位职责
2013/12/20 职场文书
运动会致辞稿50字
2014/02/04 职场文书
护士毕业实习感言
2014/03/05 职场文书
建议书标准格式
2014/03/12 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
先进个人推荐材料
2014/12/29 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python