Swiper 简单使用
来源:互联网 发布:统计学数据分析报告 编辑:程序博客网 时间:2024/05/16 15:27
什么是swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
相关资源链接
中文站官网:http://www.swiper.com.cn/Zepto官网:http://www.zeptojs.cn/Jquery官网:http://jquery.com/
使用方法
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。
<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="path/to/swiper.min.css"></head><body> ... <script src="path/to/swiper.min.js"></script></body></html>
如果你的页面加载了jQuery.js或者zepto.js,你可以选择使用更轻便的swiper.jquery.min.js。
<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="path/to/swiper.min.css"></head><body> ... <script src="path/to/jquery.js"></script> <script src="path/to/swiper.jquery.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:最好是挨着标签
<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.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应该已经能正常切换了,如果没有,你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper,开启华丽移动前端创作之旅。
0 0
- Swiper 简单使用
- swiper简单使用
- swiper简单使用2
- Swiper使用
- swiper使用
- 使用swiper轮播图手写js之后冲突简单解决办法
- 如何使用swiper
- swiper.js插件使用
- swiper使用例子
- Swiper的使用心得
- 如何使用插件 Swiper
- swiper使用的经验
- 轮播图swiper的使用
- swiper使用样例
- swiper的使用教程
- Swiper的简单实用方法
- swiper
- swiper
- Android WebView不显示视频
- 图计数
- axis2开发之---生成wsdl文件(3)
- Redis教程(一):Redis简介
- 完美解决failed to open stream: HTTP request failed!(file_get_contents引起的)
- Swiper 简单使用
- Redis教程(二):String数据类型
- Redis教程(三):List数据类型
- 在 UITabBarController 和 UINavigationController tableView被navigati
- 一个简单的音频播放脚本
- Redis教程(四):Hashes数据类型
- 在windows服务器上都正常,但放到一台linux服务器上session变量却不能传递
- Android之WebView
- 事务的嵌套