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游戏之优化篇
Nov 08 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jQuery设置div一直在页面顶部显示的方法
Oct 24 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
js代码实现轮播图
May 04 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
php查看session内容的函数
2008/08/27 PHP
基于PHP编程注意事项的小结
2013/04/27 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
js 数据类型判断的方法
2020/12/03 Javascript
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python使用MySQLdb访问mysql数据库的方法
2015/08/03 Python
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
numpy中索引和切片详解
2017/12/15 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
球队口号
2014/06/18 职场文书
个人总结格式范文
2015/03/09 职场文书
永远是春天观后感
2015/06/12 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python