Bxslider：当幻灯片消失时，内容和下一个/上一个箭头会消失

Posted 2023-02-25

【中文标题】Bxslider：当幻灯片消失时，内容和下一个/上一个箭头会消失

【英文标题】：Bxslider: content and next/prev arrows fade when slides fade

【发布时间】：2013-08-22 20:38:42

【问题描述】：

每次 BX 幻灯片转换时，我的控件都会淡出，任何覆盖幻灯片的内容也会淡出，即使它不在用于幻灯片启动的包装器内。此问题不会在“水平”模式下发生，只会在“淡入淡出”模式下发生。我正在使用这样的自定义下一个和上一个箭头：

<div class="bx-controls-direction is-select-disabled">
    <span class="bx-direction prev bx-prev"><< Custom Arrow</span><span class="bx-direction next bx-next">Custom Arrow >></span>
</div>

并使用此代码使它们正常工作（它还会重置计时器）：

       $('.bx-next').click(function(e)
            slider.stopAuto();
            slider.goToNextSlide();
            slider.startAuto();
        );

        $('.bx-prev').click(function(e)
            slider.stopAuto();
            slider.goToPrevSlide();
            slider.startAuto();
        );

请看这个工作小提琴的演示：

http://jsfiddle.net/pRBVZ/

这是一个错误，还是我的代码有问题？谢谢！

【参考方案1】：

我刚刚添加了一个 css 属性，它似乎已经解决了您的问题。

尝试替换以下类

.bx-controls-direction 
   position: absolute;
   top: 50%;
   width: 100%;
   z-index:100;

您已将 z-index:55 分配给您的内容，我认为这会干扰您的控制。

【讨论】：

很棒的发现 Vijeta。不知怎的，我错过了那个。我实际上增加了 .bx 方向的 z-index，但同样的想法。接受！