Swiper使用
2016-04-11 11:11
274 查看
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件。下载地址:http://www.swiper.com.cn/download/index.html#file5
<span style="font-size:14px;"><!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></span>
如果你的页面加载了jQuery.js或者zepto.js,你可以选择使用更轻便的swiper.jquery.min.js。下载地址:http://www.swiper.com.cn/download/index.html#file5
<!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:最好是挨着</body>标签
<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内容的后面,则需要在页面加载完成后再初始化。
<span style="font-size:14px;"><script type="text/javascript">
window.onload = function() {
...
}
</script></span>或者这样(Jquery和Zepto)
<span style="font-size:14px;"><script type="text/javascript"> $(document).ready(function () { ... }) </script></span>
5.完成。恭喜你,现在你的Swiper应该已经能正常切换了
相关文章推荐
- 【Swiper插件应用-01】基于Swiper实现的列表切换效果
- 关于Swiper3.x的a标签bug
- swiper下loop模式点击事件无效的原因
- Swiper使用说明
- 如何使用Swiper在同一个页面上多个轮播组件
- Swiper 简单实例
- swiper 单slide轮播
- 微信小程序的视图容器—swiper
- 微信小程序------轮播图
- 仿移动端触摸滑动插件swiper,的简单实现
- swiper 重新初始化
- 解决swiper动态数据加载在移动端下左右滑动不好使?
- swiper教程--swiper的基础使用(二十)
- swiper教程——swiper的基础使用(十九)
- swiper的基础使用(十八)
- swiper的基础使用(十七)
- swiper的基础使用(十六)
- swiper的基础使用(十五)
- swiper的基础使用(十四)
- swiper的基本使用(十三)