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 02 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
详解vue-cli下ESlint 配置说明
Sep 03 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
Nov 14 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中字符串和正则表达式详解
2014/10/23 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
很可爱的输入框
2008/08/03 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
jquery移动节点实例
2015/01/14 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python实现字典的遍历与排序功能示例
2017/12/23 Python
python机器人行走步数问题的解决
2018/01/29 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python中的变量如何开辟内存
2018/06/26 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
教师自查自纠材料
2014/10/14 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
新员工辞职信范文
2015/05/12 职场文书
八月迷情观后感
2015/06/11 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android