我对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>
谢谢你， 凯文
答案 0 :(得分：6)
如果您还没有找到解决方案，我之前发现此解决方案可能对您有用。
对我来说问题是CSS3过渡和adding useCSS: false迫使bxslider使用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>
答案 1 :(得分：1)
当我将minSlides设置为1时，这似乎发生在我身上。其他解决方案都没有为我工作，但将minSlides更改为1以上会阻止问题的发生。
进一步研究一下，在GitHub上引发了一个问题，标志着这个问题 - 容器宽度的插件内置了一个缓冲，但不够大： https://github.com/stevenwanderski/bxslider-4/issues/467
提交了一个等待合并的简单修复： https://github.com/stevenwanderski/bxslider-4/pull/468/files
我试过了，它对我有用。
答案 2 :(得分：0)
我有类似的问题。对我来说，问题是我无意中将一类bx-clone添加到构成bxslider幻灯片的html元素中。当应用于一组HTML元素时，Bxslider会添加此类，因此手动执行此操作必须干扰事物。当我删除这个类属性时，从最后一张幻灯片到第一张幻灯片的转换很好（即顺利地向右移动，而不是快速滚动到所有幻灯片）。
破码：
<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>
答案 3 :(得分：0)
这最终对我有用。这花了我很多时间来解决这个问题，但是除了上面列出的其他答案之外，值的单引号修复了回滚到第一张幻灯片的问题。现在它顺利过渡到第一个。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
pager: 'false',
mode: 'horizontal',
auto: 'true',
speed: '900',
pause: '6000',
controls: 'false',
slideMargin: '20',
slideWidth: '940',
infiniteLoop: 'true',
maxSlides: '1',
moveSlides: '1',
moveSlideQty: '1',
useCSS: 'false',
});
});
</script>
答案 4 :(得分：0)
似乎Bxslider有时会错误地计算包装ul容器的宽度。这会强制结束bxclone不会渲染到最后一个元素的右侧。无论怎样我都无法删除内联边距 - 右边它添加到内部li元素但是很简单：
.bxslider{
@include respond-to-max(phones) {
margin-right: 2px !important;
}
}
为我解决了。
以上是
的修正$('#section-from-store-slider').bxSlider({
mode: 'horizontal',
captions: false,
adaptiveHeight: true,
prevText: '',
nextText: '',
slideMargin: 0,
autoReload: true,
infiniteLoop: true,
breaks: [{ screen: 0, slides: 1 }, { screen: 768, slides: 3 }, { screen: 1024, slides: 4 }]
});
现在我使用了2px，因为bxslider将它设置为5px，这使它变宽，这取决于格式，3px或4px或甚至0解决它。
我知道这被归类为“丑陋”的错误，我们不喜欢！重要。但这是注入内联风格的。
下面是简单的非sass，非响应性css：
#yourslider.bxslider li{
margin-right:0 important!;
}
答案 5 :(得分：0)
如果您使用Wordpress并在侧边栏中放置滑块，那么问题似乎是slideMargin选项（＆gt; 0）阻止图像按顺序排列。这些是我使用过的设置：
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.testimonials-slider').bxSlider({
minSlides: 1,
maxSlides: 1,
slideMargin: 0,
infiniteLoop:true,
autoReload:true,
auto: <?php echo isset($data['auto']) ? $data['auto'] : "true";?>,
pager:<?php echo isset($data['pager']) ? $data['pager'] : "true";?>,
adaptiveHeight:true,
controls:<?php echo isset($data['controls']) ? $data['controls'] : "true";?>,
autoControls: false,
speed:<?php echo ((isset($data['speed'])) and (!empty($data['speed']))) ? $data['speed'] : "500";?>,
mode:'<?php echo isset($data['mode']) ? $data['mode'] : "horizontal";?>',
randomStart:<?php echo isset($data['randomstart']) ? $data['randomstart'] : "false";?>,
pause: <?php echo ((isset($data['pause'])) and (!empty($data['pause']))) ? $data['pause'] : "5000";?>
});
});
</script>
只需忽略PHP设置即可。主要是设置slideMargin：0，infiniteLoop：true，autoReload：true，
答案 6 :(得分：0)
这可能看起来很愚蠢，当我的其他开发人员意识到我们两次调用bxslider函数时，我正在努力解决这个问题 - 一次是从插件和其他人手动调用。
在Chrome上，按Ctrl + U，然后快速搜索bxslider。如果你看到它两次，从课程代码中删除你应该是好的。
答案 7 :(得分：0)
我的问题略有不同，但这可能有助于某人。
我正在使用boxslider。可以说我有四个幻灯片在转盘上自动旋转。我开始使用的代码设置为从第一张幻灯片开始，然后停在最后一张。我希望它能够不断旋转或执行“infiniteloop”。当我在jquery.bxslider.js中将无限循环设置为true时，滑块将显示幻灯片1和2，当它达到3时，它将通过它拉链并显示幻灯片1，然后显示4，然后它将重新开始再次。这当然会导致我想要在幻灯片3上显示的内容出现问题。我的代码在下面，我做了什么来修复它。
<script src="common/js/jquery.bxslider.js"></script>
<link href="common/css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.slider1').bxSlider({
mode: 'horizontal',
slideWidth: 940,
minSlides: 1,
maxSlides: 9,
slideMargin: 20,
controls: true
});
});
</script>
<div id="carousel">
<div class="slider1">
<div class="slide">[STUFFHERE]</div>
<div class="slide">[STUFFHERE]</div>
<div class="slide">[STUFFHERE]</div>
<div class="slide">[STUFFHERE]</div>
</div>
</div>
更改jquery.bxslider.js中的设置，以便无限循环为真
// GENERAL
mode: 'horizontal',
slideSelector: '',
infiniteLoop: true,
hideControlOnEnd: false,
speed: 500,
easing: 'ease',
slideMargin: 0,
startSlide: 0,
randomStart: false,
captions: false,
ticker: false,
tickerHover: false,
adaptiveHeight: false,
adaptiveHeightSpeed: 500,
video: false,
useCSS: true,
preloadImages: 'all',
responsive: true,
我需要做的就是更改min / maxslides值。无论它们的默认值是什么，它们都不允许infiniteloop设置正常工作。根据您对滑块的要求，可能需要进行一些实验，但这对我的问题有用。
$(document).ready(function(){
$('.slider1').bxSlider({
mode: 'horizontal',
slideWidth: 940,
minSlides: <!--from 1--> to 0,
maxSlides: <!--from 9--> to 1,
slideMargin: 20,
controls: true