jQuery BxSlider 将最后一张幻灯片显示为第一张幻灯片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18373143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BxSlider displayes last slide as first slide
提问by Abhimanue Tamang
I have created 4 sliders. Initially all 4 are hidden (display:none) so I have used this code to display the relevant slider on click of its respective category.
我创建了 4 个滑块。最初，所有 4 个都是隐藏的（显示：无），因此我使用此代码在单击相应类别时显示相关滑块。
The slider configuration.
滑块配置。
touchEnabled: true,
hideControlOnEnd: true,
preloadImages: 'all',
infiniteLoop: false,
mode: 'horizontal',
startSlide: 0,
slideWidth: 300,
minSlides: 2,
maxSlides: 3,
slideMargin: 10,
pager: false,
slideSelector: ".isotope-item",
nextSelector: "#forefoo2_next",
prevSelector: "#forefoo2_prev",
nextText: '',
prevText: '',
onSliderLoad: function(){
jQuery(".sliloading").hide();
},
jQuery(window).ready(function(){
var slider4 = jQuery('.cat_fore').bxSlider();
var slider2 = jQuery('#cat_two').bxSlider();
var slider3 = jQuery('.cat_three').bxSlider();
var slider1 = jQuery('.cat_one').bxSlider();
jQuery("#sel_cat a" ).on("click", function(){
var current = jQuery(this).attr("slider");
jQuery(".sliloading").show();
jQuery(".slider").hide();
if( current == "cat_one"){
slider1.reloadSlider(s1config);
}else if(current == "cat_two"){
slider2.reloadSlider(s2config);
}else if(current == "cat_three"){
slider3.reloadSlider(s3config);
}else if(current == "cat_fore"){
slider4.reloadSlider(s4config);
}
}
});
The problem is when the slider is having less then 20 slides it reverses the count of the slides that is it displayed last slide as first slide.
问题是当滑块少于 20 张幻灯片时，它会反转幻灯片的计数，即最后一张幻灯片显示为第一张幻灯片。
For slides 20 or more then 20 it works fine.
I also tried different solutions listed on this linkbut nothing worked for me.
I tried to replicate the same example on fiddlewhich is working fine but on liveit is still giving the same problem
对于幻灯片 20 或更多然后 20 它工作正常。我还尝试了此链接上列出的不同解决方案，但没有任何效果。
我试图在小提琴上复制相同的例子，它工作正常，但在现场它仍然出现同样的问题
I think problem is in the height or some other css element which is making it start from the last slide because in fiddle the view port is small so it displayed slider first slide and also when wee try to decrease the size of the view port of the browser it also displayed slider in the right way.
我认为问题出在高度或其他一些 css 元素上，这使得它从最后一张幻灯片开始，因为在小提琴中，视口很小，所以它在第一张幻灯片上显示滑块，并且当我们尝试减小视口的大小时浏览器它还以正确的方式显示滑块。
回答by Abetoy
I was having this problem too just recently. The solution is you have to put the instance of BxSlider on $(window).load() event not in $(window).ready() here's a sample.
我最近也有这个问题。解决方案是您必须将 BxSlider 的实例放在 $(window).load() 事件而不是 $(window).ready() 中，这是一个示例。
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
});
});
It is important to note that the problem starts to persist once you have at least 7 slides.
重要的是要注意，一旦您拥有至少 7 张幻灯片，问题就会开始持续存在。
回答by red_alert
Fast solution:
快速解决方案：
.bx-clone{
display: none !important;
}
If you don't want to lose the infiniteLoop animation:
如果您不想丢失无限循环动画：
onSliderLoad: function() {
$("YOUR_SLIDER_SELECTOR").css(
"-webkit-transform",
"translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
);
}
回答by OG Sean
This is a chrome-only bug for me, where the "clone slide" intended for making seamless scrolling from the last slide back to the first will show first pushing the actual first slide out of the way. Hiding the clone slide is a quick fix but breaks the infinite scrolling effect.
这对我来说是一个仅限 chrome 的错误，其中用于从最后一张幻灯片无缝滚动到第一张幻灯片的“克隆幻灯片”将显示首先将实际的第一张幻灯片推开。隐藏克隆幻灯片是一个快速修复，但会破坏无限滚动效果。
This below solution fixed it for me strictly with CSS, no gnarly 3D transform CSS, Jquery, or anything... plays OK with bootstrap now:
下面的解决方案严格使用 CSS 为我修复了它，没有粗糙的 3D 转换 CSS、Jquery 或任何东西......现在可以使用引导程序：
/* BUG FIX FOR CLONE SLIDE FIRST */
.bx-wrapper img {
max-width: 100%;
display: inline-block;
}
.bx-viewport li {
min-height: 1px;
min-width: 1px;
}
I think if you're using jquery to show the clone using onSlideBefore you've gone too far, there is probably a CSS fix depending on your specific situation. Sometimes it stems from an image size and/or display style issue with BOOTSTRAP, so if you're using BS, there's a CSS fix for sure. In general, if all of your slides are the same size try setting the height and width, max height and width, and min height and width for the images and it may fix it.
我认为，如果您使用 jquery 来显示使用 onSlideBefore 的克隆，那么可能会根据您的具体情况进行 CSS 修复。有时它源于 BOOTSTRAP 的图像大小和/或显示样式问题，因此如果您使用的是 BS，那么肯定会有 CSS 修复。通常，如果您的所有幻灯片大小相同，请尝试设置图像的高度和宽度、最大高度和宽度以及最小高度和宽度，它可能会修复它。
This isn't necessary, but if that doesn't work, in the bxSlider init options try useCSS: false, ex:
这不是必需的，但如果这不起作用，请在 bxSlider init 选项中尝试 useCSS: false，例如：
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
useCSS:false
});
});
回答by user4482668
You just need to stop the loop :
你只需要停止循环：
infiniteLoop:false
...and there is no more .bx-clone
...并且没有更多的 .bx-clone
回答by Turbojohan
As mentioned by OG Sean it′s a Chrome bug.
正如 OG Sean 所提到的，这是一个 Chrome 错误。
I hade the same problem and the only thing needed when i tried was this css code:
我遇到了同样的问题，我尝试时唯一需要的是这个 css 代码：
.bx-viewport li { min-height: 1px; min-width: 1px; }
回答by Martin Zvarík
Working with bxslider was biggest mistake of my life.
使用 bxslider 是我一生中最大的错误。
回答by Abhimanue Tamang
Ok I don't know why but when I remove this line "minSlides: 2," it start working in the right manner.
好吧，我不知道为什么，但是当我删除“minSlides: 2”这一行时，它开始以正确的方式工作。
回答by mrutt
<li>
<img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>
Setting an explicit height and width tag on the images in the slider fixed this issue for me with sliders containing 2-5 images.
在滑块中的图像上设置明确的高度和宽度标签为我解决了这个问题，滑块包含 2-5 个图像。
