BxSlider将最后一张幻灯片显示为第一张幻灯片
BxSlider displayes last slide as first slide
我已经创建了4个滑块。最初,所有4个都是隐藏的(显示:无),所以我使用此代码在单击相应类别时显示相关滑块。
滑块配置。
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);
}
}
});
问题是,当滑块的幻灯片少于20张时,它会将最后一张幻灯片显示为第一张幻灯片的幻灯片计数反转。
对于20张或20张以上的幻灯片,效果很好。我也尝试了此链接上列出的不同解决方案,但都不起作用。
我试着在fiddle上复制同样的例子,它工作得很好,但在现场,它仍然会出现同样的问题
我认为问题在于高度或其他一些css元素,它使它从最后一张幻灯片开始,因为在fiddle中,视图端口很小,所以它首先显示滑块,而且当我们试图减小浏览器的视图端口的大小时,它也以正确的方式显示滑块。
我最近也遇到了这个问题。解决方案是,您必须将BxSlider的实例放在$(window).load()事件上,而不是放在$。
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
});
});
需要注意的是,一旦你至少有7张幻灯片,问题就会持续存在。
快速解决方案:
.bx-clone{
display: none !important;
}
如果你不想失去无限循环动画:
onSliderLoad: function() {
$("YOUR_SLIDER_SELECTOR").css(
"-webkit-transform",
"translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
);
}
这对我来说是一个仅限chrome的错误,用于从最后一张幻灯片无缝滚动回第一张幻灯片的"克隆幻灯片"将首先显示,并将实际的第一张幻灯片推开。隐藏克隆幻灯片是一个快速解决方案,但会破坏无限滚动效果。
下面的这个解决方案严格地用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;
}
我认为,如果你使用jquery来显示使用onSlide的克隆。在你走得太远之前,可能会根据你的具体情况进行CSS修复。有时它源于BOOTSTRAP的图像大小和/或显示风格问题,所以如果你使用BS,肯定有CSS修复。一般来说,如果所有幻灯片的大小都相同,请尝试设置图像的高度和宽度、最大高度和宽度以及最小高度和宽度,这可能会解决问题。
这不是必要的,但如果不起作用,请在bxSlider的init选项中尝试使用CSS:false,例如:
$(window).load(function(){
$('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
randomStart: false,
controls: true,
auto: true
useCSS:false
});
});
您只需要停止循环:
infiniteLoop:false
已经没有了。bx克隆
http://bxslider.com/options
正如OG Sean所提到的,这是一个Chrome错误。
我遇到了同样的问题,当我尝试时,唯一需要的就是这个css代码:
.bx-viewport li { min-height: 1px; min-width: 1px; }
好的,我不知道为什么,但当我删除这行"minSlides:2"时,它开始以正确的方式工作。
<li>
<img src="_images/xxx.jpg" alt="xxx" width="X" height="X"/>
</li>
在滑块中的图像上设置明确的高度和宽度标签为我修复了这个问题,滑块包含2-5个图像。
- jm按下停止步骤进入滚动的下一张幻灯片
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 引导程序3转盘-随机选择下一张幻灯片
- 如何在最后一张幻灯片上停止动画
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 指向html5库最后一张幻灯片后的html页面
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- iOS 滑块默认为最后一张幻灯片
- 光滑的滑块删除最后一张幻灯片,如果 winWidth < 500
- BX滑块滑块滑块最后一张幻灯片总是隐藏某些部分
- 如何在显示前在幻灯片放映中预加载下一张幻灯片
- 滑块中显示下一张幻灯片的链接.为什么
- 幻灯片放映-将幻灯片链接到URL,仅适用于最后一张幻灯片
- BxSlider将最后一张幻灯片显示为第一张幻灯片
- 如何在flexslider中单击图像时显示下一张幻灯片
- 停止最后一张幻灯片上的jQuery按钮动画
- 在附加的代码中,图像滑块是如何从一张幻灯片发展到另一张幻灯片的
- 使用shift键并单击可转到下一张幻灯片