BxSlider 将最后一张幻灯片显示为第一张幻灯片

Posted 2023-05-09

【中文标题】BxSlider 将最后一张幻灯片显示为第一张幻灯片

【英文标题】：BxSlider displayes last slide as first slide

【发布时间】：2013-08-24 18:03:57

【问题描述】：

我创建了 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 它工作正常。 我还尝试了this link 上列出的不同解决方案，但对我没有任何效果。 我试图在fiddle 上复制相同的示例，它工作正常，但在live 上仍然出现同样的问题

我认为问题出在高度或其他一些 css 元素上，这使得它从最后一张幻灯片开始，因为在小提琴中，视口很小，所以它在第一张幻灯片上显示滑块，而且当我们尝试减小视图的大小时浏览器的端口它也以正确的方式显示滑块。

【参考方案1】：

我最近也遇到了这个问题。解决方案是您必须将 BxSlider 的实例放在 $(window).load() 事件上，而不是在 $(window).ready() 中，这是一个示例。

$(window).load(function()
            $('.bxslider').bxSlider(
                pagerCustom: '#bx-pager',
                randomStart: false,
                controls: true,
                auto: true
            );    
        );

请务必注意，一旦您拥有至少 7 张幻灯片，问题就会开始持续存在。

【讨论】：

这解决了我的问题:) 非常感谢。我发现它会在模式“水平”时发生。我尝试更改为“淡入淡出”模式，它工作正常（意味着不显示最后一张幻灯片）。

它在 bxslider 文档中说您必须使用 .onReady 否则它将不起作用。你的工作正常，但你可能希望避免这种变通方法以坚持使用文档，以防他们更改期望它为 onReady() 的内容。对于这个问题，还有其他可行的解决方法/修复方法。

我有 5 张幻灯片，问题正在发生，所以它发生在少于 7 张幻灯片的情况下 :(

太棒了。非常感谢。

【参考方案2】：

快速解决方案：

.bx-clone
   display: none !important;

如果你不想丢失infiniteLoop动画：

   onSliderLoad: function() 
      $("YOUR_SLIDER_SELECTOR").css(
         "-webkit-transform", 
         "translate3d(-" + YOUR_SLIDER_WIDTH + "px, 0, 0)"
      );
    

【讨论】：

这实际上帮助了我！但我必须添加 !important，因为 bx 滑块将样式添加到覆盖此样式的 .bx-clone 元素。谢谢！

很好的解决方案。拯救了这一天！

【参考方案3】：

这对我来说是一个仅限 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 来显示克隆使用 onSlideBefore 走得太远，可能有一个 CSS 修复取决于您的具体情况。有时它源于 BOOTSTRAP 的图像大小和/或显示样式问题，所以如果您使用的是 BS，肯定会有 CSS 修复。一般来说，如果您的所有幻灯片大小相同，请尝试设置图像的高度和宽度、最大高度和宽度以及最小高度和宽度，这可能会解决问题。

这不是必需的，但如果这不起作用，请在 bxSlider 初始化选项中尝试 useCSS: false, ex:

$(window).load(function()
        $('.bxslider').bxSlider(
            pagerCustom: '#bx-pager',
            randomStart: false,
            controls: true,
            auto: true
            useCSS:false
        );    
    );

【参考方案4】：

你只需要停止循环：

infiniteLoop:false

...没有更多的 .bx-clone

http://bxslider.com/options

【讨论】：

是否可以开启无限循环并移除 .bx 克隆？

这解决了我的问题，但我不需要无限循环，所以这不是投标交易。谢谢。

【参考方案5】：

正如 OG Sean 所说，这是一个 Chrome 错误。

我遇到了同样的问题，我尝试时唯一需要的是这个 css 代码：

.bx-viewport li  min-height: 1px; min-width: 1px; 

【参考方案6】：

好吧，我不知道为什么，但是当我删除这行“minSlides: 2”时，它开始以正确的方式工作。

【参考方案7】：

<li>
    <img src="_images/xxx.jpg"   />
</li>

在滑块中的图像上设置一个明确的高度和宽度标签为我解决了这个问题，滑块包含 2-5 个图像。

【参考方案8】：

使用 bxslider 是我一生中最大的错误。