无法为bxSlider设置图像＆＃39; next / prev＆＃39;控制

Question

问题背景：

我正在使用bxSlider在我的网站中实现图库，如下所示：

问题：

我尝试将prev和next控件设置为controls.png图像文件中提供的prev和next箭头，其中包含bxSlider项目，如下所示：

目前我无法设置这些图片，我的图片的上一页和下一页控件只有< >，如图所示（请注意：这些可以在这个问题顶部的画廊图片）：

代码：

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>

目前我已将背景图片网址更改为controls.png上的.bx-prev和.bx-prev CSS样式中的bxSlider.css文件（存储在我网站上的图片文件夹中） {1}}课程：

.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和下一个标记方面的任何帮助都会很棒。

更新

名为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;
} 

Answer 2

我在轨道上使用bxslider，它的工作原理如下：

int32 *i = ...;
*i = 42;

和css：

  $(document).ready(function () {

    $('#bx4').bxSlider({
        hideControlOnEnd: true,
        minSlides: 4,
        maxSlides: 4,
        slideWidth: 360,
        slideMargin: 10,
        pager: false,

     });
   });