插件描述：Swiper-master滑动翻页支付移动端
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。
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>如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() { ...}
</script>或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () { ...})
</script>5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图,滑块和旋转
超棒的响应式幻灯jQuery插件 - refineslide
今天我们介绍的这个幻灯插件能够帮助我们使用响应式的方式展示图片幻灯，最重要的在于它支持很多超棒的CSS3幻灯过渡效果，能够帮助你创建超酷的幻灯效果。
幻灯片和轮播图
讨论这个项目（24）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
weirdooo 0
2018/7/4 15:11:07
-
怎么让第一个效果，一开始的时候第二个slide在居中状态呢
被窝是青春的坟墓0
2018/7/12 14:17:21
-
initialSlide:1
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
