bxSlider 控制为真但不显示

Question

我目前正在使用 bxSlider ，但是现在一切都很完美，唯一的问题是我的滑块有 controls:true ，但它们是隐藏的。我想将箭头作为控件。有一个带有控件的文件夹箭头，但不知道如何在 jquery 中将它们实现为 img。当我将鼠标悬停在左侧和右侧时，我的光标就像（可点击）但这些控件是隐藏的。这是我的 html+js 代码。

html:

   <div class="headerSliderHolder"> 
                        <ul class="bxslider">
                            <li>
                                <img src="img/slider_1.png" alt="Slider_1">

                            </li>
                            <li>
                                <img src="img/slider_2.png" alt="Slider2">
                            </li>
                            <li>       
                                <img src="img/slider_3.png" alt="Slider3">
                            </li>
                        </ul>
 </div>

js:

document.addEventListener("DOMContentLoaded",function(){
    $(document).ready(function(){
          $('.bxslider').bxSlider({
                mode:'fade',
                controls:true,
                responsive:true,
                auto:true,
                speed:800,
                pause:2500
              }
          );         
});

Answer 1

如果您可以单击箭头点但看不到箭头本身，那么您似乎没有加载箭头的图像。

在常规 bxslider 设置中，css 指向“images”文件夹中的图像，如下所示：

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url(images/controls.png) no-repeat -43px -32px;
}

因此，您需要确保在 juqery.bxslider.css 中指向“images/controls.png”的正确位置