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代码
Aug 22 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
JavaScript判断对象和数组的两种方法
May 31 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基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
理解Javascript闭包
2013/11/01 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
八大排序算法的Python实现
2021/01/28 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
遗传算法python版
2018/03/19 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Python Pandas 箱线图的实现
2019/07/23 Python
Python的垃圾回收机制详解
2019/08/28 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
银行出纳岗位职责
2013/11/25 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
学习两会精神心得范文
2014/03/17 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
大学辅导员述职报告
2015/01/10 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书