插件描述：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:
相关插件-幻灯片和轮播图,滑块和旋转
5种jQuery超酷3d幻灯片效果
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果：爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
幻灯片和轮播图
讨论这个项目（24）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
weirdooo 0
2018/7/4 15:11:07
-
怎么让第一个效果，一开始的时候第二个slide在居中状态呢
被窝是青春的坟墓0
2018/7/12 14:17:21
-
initialSlide:1
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
