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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue组件生命周期详解
Nov 07 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Vue 构造选项 - 进阶使用说明
Aug 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
js实现盒子移动动画效果
2020/08/09 Javascript
Python 深入理解yield
2008/09/06 Python
简单介绍Python中利用生成器实现的并发编程
2015/05/04 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
小学语文教学随笔
2015/08/14 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS