Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
时间:2019-04-15
本文章向大家介绍Swiper 4.x 使用方法(移动端网站的内容触摸滑动),主要包括Swiper 4.x 使用方法(移动端网站的内容触摸滑动)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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应该已经能正常切换了。
- Java支付宝接口开发【面试+工作】
- 03.SVN检出/解决冲突/提交
- Spring思维导图,让Spring不再难懂(mvc篇)
- SQL优化一(SQL使用技巧)
- Spring思维导图,让Spring不再难懂(aop篇)
- MongoDB初探第二篇 (r4笔记第82天)
- Spring思维导图,让Spring不再难懂(cache篇)
- 曲折的10g,11g中EM的安装配置过程(r4笔记第98天)
- Linux 学习记录 一(安装、基本文件操作).
- 实用的位运算应用(r4笔记第97天)
- 关于date格式的两个案例(r4笔记第96天)
- 【新技术分享】C++17 最新进展
- Ant + Jenkies +Tomcat 自动构建部署Web项目
- 博客项目Tale思维导图,让项目不再难懂
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- PDO::getAvailableDrivers讲解
- PDO::_construct讲解
- Yii2.0实现的批量更新及批量插入功能示例
- PDO::inTransaction讲解
- 小程序前后端交互使用JWT
- python文件操作seek()偏移量,读取指正到指定位置操作
- 使用OpenCV去除面积较小的连通域
- 使用vs code编辑调试php配置的方法
- Python OpenCV去除字母后面的杂线操作
- PDO::rollBack讲解
- PyTorch的torch.cat用法
- keras在构建LSTM模型时对变长序列的处理操作
- Discuz不使用插件实现简单的打赏功能
- Pytorch学习之torch用法—-比较操作(Comparison Ops)
- PHP里的$_GET数组介绍