ximan/swipeslide

移动端轮播图（基于Zepto/jQuery）

swipeSlide for Zepto/jQuery Plugin

简介

移动端（基于Zepto/jQuery）的轮播插件：http://ons.me/500.html

示例

普通轮播DEMO链接

全屏大图DEMO链接

全屏文字DEMO链接

快速切换DEMO链接

点小图出大图DEMO链接

依赖

Zepto 或者 jQuery

使用方法

$('.element').swipeSlide({
    // 参数
});

参数列表

参数	说明	默认值	可填值
ul	父dom	ul	.element的子dom
li	子dom	li	ul的子dom
index	轮播初始值	0	数字
continuousScroll	连续滚动	false	true和false
autoSwipe	自动切换	true	true和false
speed	切换速度	4000	数字
axisX	X轴滚动	true	true和false
transitionType	过渡类型	ease	linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier
lazyLoad	图片懒加载	false	true和false
firstCallback	页面加载回调	空	function(i,sum,me){}（i为索引值，sum为总和，me为自己）
callback	每次滚动回调	空	function(i,sum,me){}（参数同上）

API

暴露一些功能，可以让swipeSlide更灵活的使用

goTo(num) 指定轮播，详见DEMO4代码

最新版本

3.4.4(160909)

• 修复自动切换但连不续滚动时，手动操作首屏向前滑动或者末屏向后滑动，不自动切换bug

所有更新日志

缺点

只能固定高度或者成比例宽度，无法自适应高度。

swipeslide's Issues

Is need css style in this plugin?

Hey,guys,nice slide plugin is it. And I used it in my project. But a question I should ask you. In your README, I didn't read anything about css style when using this plugin. However this plugin works abnormal without style. So whether I should write some style when using this plugin?
PS: I find style tag in the head tag in your example website. Whether you forgot write style description in README?

建议加个bower.json发布到bower上

RT~
方便依赖方使用并控制版本

page 里面的元素如果超出一屏,横向滚动无效.

<div class="page"> <div class="title">page one</div> <div class="subtitle">page one subtitle</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="title">page one</div> <div class="arrow-h"><i></i></div> </div>

配置参数不可扩展除ul li 之外的其他dom结构

西门大哥您好，我问一下，这个插件只适用于ul>li这样的dom结构吗？配置参数里的ul 和 li指定其他的dom元素插件就会报错。可以配置成任何结构都适用吗，这样插件的使用范围就更广了。

手指滑动导致自动滑动失效

对于设定了autoSlide的情形，如果在第一屏手指横屏左滑或者在最后一屏横屏又滑，大概率会导致其后自动滑动功能失效，页面停止自动滑动

轮播图在jQuery mobile框架中使用的问题

jQuery mobile框架中使用轮播图插件，如果在两个不同的data-role=“page”中分别使用两个轮播图，只有一个正常，另外一个轮播会有问题

提个代码的问题

line:233
if(opts.axisX){
_moveDistance = _moveResultX;
}else{
_moveDistance = _moveResultY;
}

js中有几处类似的代码，为什么这样写呢？不解？

可以通过索引来指定初始加载第几张图片不？

比如说现在有3张图片，用户点了第2张，那么有方法支持从第二张开始播放吗？

谢谢！

lazyload报错

针对ie设置touch-action属性

ximan你好，最近在看你写的移动端轮播，有一个地方不是太懂希望能够指点一下，谢谢！
var action = '';
if(me.opts.axisX){
action = 'pan-y';//这个地方不是太懂，不应该是‘pan-x’?
}else{
action = 'none';//这个为什么要设置none而不是'pan-y'?
}
me.$el.css({'-ms-touch-action':action,'touch-action':action});

轮播a 标签跳转bug

点击轮播后，轮播会切换到下一张，然后再跳转

为什么不能调整图片的高度呀？

我用的是你demo1里面的slide3例子，
我把里面的图片替换成了750*800的例子，但是高度调整不了！
我把里面的css换了下，发现可以了，但是，在PC上又不行了。

原来代码

.slide{
position: relative;
max-width: 640px;
overflow: hidden;
margin: 20px auto;
}
.slide:after{
content: '';
display: block;
width: 100%;
padding-top: 50%;
}
.slide ul{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.slide li{
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
我修改后的代码
.slide{
position: relative;
max-width: 750px;
}
.slide ul{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.slide li{
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

这是什么原因尼？
谢谢了！

2.0 到3.0 是不是有broken change啊

之前的方法好像不能用了，能不能有一个转移的方案

README.md 文件上的一些问题

• 第二个DEMO（文字）和第三个DEMO（大图）的二维码反了
• 第四个DEMO好像有点小Bug，点击上面的导航可以跳转到对应页面，但是没有为对应导航加上 Active 样式

滑动中 AJAX

场景是这样的
有可能数据太多 需要在滑动的时候 AJAX请求新的数据 再append后面的UL中
重新把UL里的HTML清楚 在append这个新的数据 再重新调用swipeSlide
但是新生成的UL滑动到最后的时候 会马上跳转到第一个LI

重新调用swipeSlide 元素就绑定了两次 所以产生了BUG
如果 数据很多 需要用AJAX去请求新的数据append 怎么玩？

ios的微信下，轮播时存在bug

使用的是默认的设置，轮播时在ios的微信下轮播动画播放一半后马上一闪而过，后来在安卓的微信以及ios的safari下测试都是不存在该问题的。所以此bug只会在ios的微信下出现。

动态元素bug

一个ul里的li动态变化，给这个ul的父元素绑定插件后会出现bug，建议在init中加上
me.$el.off();

手机翻转屏幕横屏的时候图片有时候平行放两张

手机翻转屏幕横屏的时候图片有时候平行放两张