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 相关文章推荐
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
javascript数组去重小结
Mar 07 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
详解Vue方法与事件
Mar 09 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP培训要多少钱
2017/06/06 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python文件的md5加密方法
2016/04/06 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
预备党员转正考核材料
2014/06/03 职场文书
县委务虚会发言材料
2014/10/20 职场文书
订货会邀请函
2015/01/31 职场文书
农业项目投资意向书
2015/05/09 职场文书
公开致歉信
2019/06/24 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
使用canvas对video视频某一刻截图功能
2021/09/25 HTML / CSS