jquery - 无法为 bxSlider 'next/prev' 控件设置图像

Question

问题背景:

我正在使用 bxSlider 在我的站点中实现一个画廊，如图所示:

问题:

我正在尝试设置 prev和 next控制 bxSlider 元素的 controls.png 图像文件中提供的上一个和下一个箭头，如下所示:

目前我无法设置这些图像，图像的上一个和下一个控件只是 < > ，如图所示(请注意:这些可以在这个问题顶部的图库图片中看到):

代码:

bxSlider 画廊的 HTML 标记:

  <div class="bxslider-controls">
            <span id="bx-prev4"><a class="bx-next"></a></span>
            <span id="bx-next4"><a class="bx-prev"></a></span>
        </div>
        <ul class="bxslider" id="bx4">
            <li>
                <img src="~/Images/wf1.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf2.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf3.jpg" alt="...">
            </li>
            <li>
                <img src="~/Images/wf4.jpg" alt="...">
            </li>
        </ul>

目前我已经将背景图片 url 更改为 controls.png .bx-prev 上的文件(存储在我网站的图像文件夹中)和 .bx-prev bxSlider.css 中的 CSS 样式类:

.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;
}

以下 JQuery 用于控制 bxSlider 画廊图像，而不是 nextText和 prevText属性:

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,
        nextSelector: '#bx-next4',
        prevSelector: '#bx-prev4',
        nextText: '>',
        prevText: '<',

     });
   });

任何有助于解决为什么我不能应用 controls.png 中的图像的帮助添加到 HTML 中的 prev 和 next 标签会很棒。

更新:

名为 anchors 的新 CSS 样式:

.anchors{
    display:inline-block;
    height:50px;
    width:50px;
}

应用于标签:

<div class="bxslider-controls">
   <span id="bx-prev4"><a class="bx-next anchors"></a></span>
   <span id="bx-next4"><a class="bx-prev anchors"></a></span>
</div>

我已经从图像路径中删除了 ~:

.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;
}

现在输出:

可以看出行内间距已生效，但图像仍未显示。

Answer 1

尝试:

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

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