to滑块无限循环滚动左到第一幻灯片，而不是右到循环。
to滑块无限循环滚动左到第一幻灯片，而不是右到循环。
提问于 2014-03-17 19:58:09
我对bxslider滑块有个快速的问题。
但是，我遇到的问题是，当infiniteLoop设置为true时，它会向左转，而不是循环的第一张幻灯片。这是我的代码：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: false,
controls: false,
pause: 4000,
infiniteLoop: true,
mode: 'horizontal',
autoDirection: 'next',
responsive: true,
preloadImages: 'all',
minSlides: 2,
autoDelay: 0,
randomStart: false,
pager: false,
moveSlideQty: 1
});
});
</script> 回答 8
Stack Overflow用户
回答已采纳
发布于 2014-06-05 08:52:21
我以前找到了这个解决方案，如果你还没有找到解决方案的话，这个解决方案可能对你有用。
对我来说，问题在于CSS3转换，而adding useCSS: false强迫me滑块使用jQuery来代替CSS。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: false,
controls: false,
pause: 4000,
infiniteLoop: true,
mode: 'horizontal',
autoDirection: 'next',
responsive: true,
preloadImages: 'all',
minSlides: 2,
autoDelay: 0,
randomStart: false,
pager: false,
moveSlideQty: 1,
useCSS: false,
});
});
</script> Stack Overflow用户
发布于 2014-10-28 19:30:20
当我将minSlides设置为1时，我似乎就会出现这种情况。其他任何解决方案都不适合我，但将minSlides更改为1以上会阻止问题的发生。
进一步来看，在GitHub上出现了一个问题，将其标记出来--在插件中为容器宽度内置了一个垫子，但这个缓冲不够大：https://github.com/stevenwanderski/bxslider-4/issues/467
有一个简单的修复程序正在等待合并：https://github.com/stevenwanderski/bxslider-4/pull/468/files
我试过了，而且对我有用。
Stack Overflow用户
发布于 2014-09-15 14:03:16
我也有过类似的问题。对我来说，问题在于我无意中在组成bxslider幻灯片的html元素中添加了一个bx克隆类。当应用于一组HTML元素时，so滑块会添加这个类，因此手动这样做一定会干扰到一些事情。当我移除这个类属性时，从最后一张幻灯片到第一张幻灯片的转换很好(即顺利地继续向右移动，而不是快速地在所有幻灯片中向左滚动)。
破译代码：
<body>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: true,
minSlides: 1,
maxSlides: 1,
pager: false,
slideWidth: 320,
touchEnabled:true
});
});
</script>
<ul class="bxslider">
<li class="bx-clone"><img src="images/tree_root.jpg" title="Funky roots" /></li>
<li class="bx-clone"><img src="images/hill_road.jpg" title="The long and winding road" /></li>
<li class="bx-clone"><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>
</body>固定代码：
<body>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: true,
minSlides: 1,
maxSlides: 1,
pager: false,
slideWidth: 320,
touchEnabled:true
});
});
</script>
<ul class="bxslider">
<li><img src="images/tree_root.jpg" title="Funky roots" /></li>
<li><img src="images/hill_road.jpg" title="The long and winding road" /></li>
<li><img src="images/trees.jpg" title="Happy trees" /></li>
</ul>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22464108
复制相关文章
相似问题
腾讯云开发者
