bxSlider 控制真实但不显示

Question

我目前正在使用 bxSlider，但是现在一切都很完美，唯一的问题是我的滑块有 controls:true，但它们 hidden.I 想将箭头作为 controls.There 是一个带有控件箭头的文件夹，但不知道如何在 jquery 中将它们实现为 img.When 我将鼠标悬停在左侧和右侧，我的光标就像（可点击）但那些控件hidden.Here 是我的 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'

的正确位置

bxSlider 控制真实但不显示

bxSlider cotrols true but not showing

javascript

jquery

bxslider