ximan / swipeslide Goto Github PK
View Code? Open in Web Editor NEW移动端轮播图(基于Zepto/jQuery)
移动端轮播图(基于Zepto/jQuery)
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?
一个ul里的li动态变化,给这个ul的父元素绑定插件后会出现bug,建议在init中加上
me.$el.off();
点击轮播后,轮播会切换到下一张,然后再跳转
对于设定了autoSlide的情形,如果在第一屏手指横屏左滑或者在最后一屏横屏又滑,大概率会导致其后自动滑动功能失效,页面停止自动滑动
RT~
方便依赖方使用并控制版本
<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元素插件就会报错。可以配置成任何结构都适用吗,这样插件的使用范围就更广了。
比如说现在有3张图片,用户点了第2张,那么有方法支持从第二张开始播放吗?
谢谢!
使用的是默认的设置,轮播时在ios的微信下轮播动画播放一半后马上一闪而过,后来在安卓的微信以及ios的safari下测试都是不存在该问题的。所以此bug只会在ios的微信下出现。
场景是这样的
有可能数据太多 需要在滑动的时候 AJAX请求新的数据 再append后面的UL中
重新把UL里的HTML清楚 在append这个新的数据 再重新调用swipeSlide
但是新生成的UL滑动到最后的时候 会马上跳转到第一个LI
重新调用swipeSlide 元素就绑定了两次 所以产生了BUG
如果 数据很多 需要用AJAX去请求新的数据append 怎么玩?
我用的是你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%;
}
这是什么原因尼?
谢谢了!
line:233
if(opts.axisX){
_moveDistance = _moveResultX;
}else{
_moveDistance = _moveResultY;
}
js中有几处类似的代码,为什么这样写呢?不解?
手机翻转屏幕横屏的时候图片有时候平行放两张
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});
之前的方法好像不能用了,能不能有一个转移的方案
jQuery mobile框架中使用轮播图插件,如果在两个不同的data-role=“page”中分别使用两个轮播图,只有一个正常,另外一个轮播会有问题
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.