Swiper使用方法 - Swiper中文网
Swiper使用方法
1.首先加载插件，需要用到的文件有和文件。
&!DOCTYPE html&
&link rel=&stylesheet& href=&path/to/swiper.min.css&&
&script src=&path/to/swiper.min.js&&&/script&
如果你的页面加载了或者，你可以选择使用更轻便的。
&!DOCTYPE html&
&link rel=&stylesheet& href=&path/to/swiper.min.css&&
&script src=&path/to/jquery.js&&&/script&
&script src=&path/to/swiper.jquery.min.js&&&/script&
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 class=&swiper-pagination&&&/div&
&!-- 如果需要导航按钮 --&
&div class=&swiper-button-prev&&&/div&
&div class=&swiper-button-next&&&/div&
&!-- 如果需要滚动条 --&
&div class=&swiper-scrollbar&&&/div&
导航等组件可以放在container之外
3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600
height: 300
4.初始化Swiper：最好是挨着&/body&标签
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
&script type=&text/javascript&&
window.onload = function() {
或者这样（Jquery和Zepto）
&script type=&text/javascript&&
$(document).ready(function () {
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个。现在开始添加各种丰富你的Swiper，开启华丽移动前端创作之旅。
*建议不使用Source Map功能，请把js压缩文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 删掉。以免在某些浏览器出现以下提示：
如需要使用Source Map，里面有该map文件，请放在相应的位置。关于使用方法示例
var mySwiper = new Swiper('.swiper-container',{
$('#btn1').click(function(){
alert(mySwiper.clickedIndex);
微信扫一扫打赏我们
转载原创文章请注明：文章转载自：Swiper中文网 []
本文地址：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）关于我们 - Swiper中文网
关于Swiper
Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择（甚至支持IE7）。
transform或left/top
flex或一般布局
停止更新 最新版本2.7.6
部分PC端浏览器，主流移动端浏览器
PC端浏览器，IE7+，部分移动端浏览器
我们致力于Swiper在国内的推广
Swiper中文网在原文翻译的基础上增加了Swiper在线演示、Swiper中文教程、Swiper中文APi、优秀作品示例和资源下载。
越来越多的优秀网站使用SwiperPowered by又TM发错地方了。。。关于swiper3下拉刷新和上拉加载问题 - Swiper3交流 - Swiper中文论坛 -
Powered by Discuz! Archiver
又TM发错地方了。。。关于swiper3下拉刷新和上拉加载问题
管理员的一个帖子启发我，然后就去做了个上拉加载和下拉刷新的例子，但出了点问题，比如上拉加载，我想做一个loading的效果，那个div放在了最后，如果ajax后台没complete传回数值的话就一直保留在那个loading处，即令wrapper的translate保持在那里，但是swiper的反弹会自动弹回去，无法显示这个loading动画，想请教一下怎么做。。。
.cn/demo/18-pull-to-refresh.html
多谢了。。。我自己鼓捣着差不多了，现在就剩加数据测试了。。。
好像又有新问题。。。那个有部分android好像不支持freeMode啊，老是滑动一卡一卡的
swiper3 还没有 这个了 真奇怪
解决了吗，是swiper2中可以使用setWrapperTranslate（），但是在3中不好使了感觉，你最终使用了2吗？怎么解决的
查看完整版本:}