無法設置圖像bxSlider的下/上一個「控制

問題背景：無法設置圖像bxSlider的下/上一個「控制

我使用bxSlider來實現我的網站畫廊，如下所示：

enter image description here

的問題：

我試圖將prev和next控件設置爲上一個和下一個箭頭supp與bxSlider項目controls.png圖像文件中撒謊，如下所示：

enter image description here

目前我不能把我的圖像，這些圖像和prev和next控制只是< >，如圖所示（ 請注意：這些都可以在畫廊的圖片，在這個問題的頂部）可以看出：

enter image description here

代碼：

HTML標記bxSlider畫廊：

<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>

目前我已經在bxSlider.css上.bx-prev和.bx-prev CSS樣式改變的背景圖像URL到controls.png文件（存儲在圖片上我的網站文件夾中）類：

.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標籤將是偉大的。

UPDATE：

新的CSS樣式命名anchors：

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

現在

輸出：

enter image description here

可以看出內嵌間距已經採取影響，但仍是圖像不顯示。

來源

2015-06-11 user1352057

不要控制錨佔用空間？由於您將BG圖像應用於錨點，因此需要將錨點設置爲塊或內嵌塊元素，併爲其指定寬度和高度。否則，沒有內容，它是0像素高，寬，你不會看到它的BG， – Leeish

此外，是否有其他的CSS在這些元素上的行爲？如果是的話，應用到哪裏以及什麼樣式。 – Leeish

Leeish是正確的，您正在使用跨度作爲鏈接，默認情況下是內聯元素。你需要明確地將它們設置爲「inline-block」或「block」級別的元素，並在它們上設置寬度/高度和/或填充以便背景圖像可以顯示。 –

嘗試：

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

來源

2015-06-11 22:02:40 Leeish

感謝您的回覆，我已經應用了您的CSS，並且沒有更改圖片不顯示。 – user1352057

看到我上面的評論。是否有其他CSS在這些元素上執行操作，如果可以，請粘貼該元素。在bx css文件中的某處，相同的項目應用了一些CSS。另外，我從來沒有在CSS中的圖像路徑中看到過〜。這有效嗎？通常我只使用'/'和'../'作爲相對路徑。 – Leeish

我已經申請了你的第一條評論，並更新了我的問題，以顯示我已經應用的更改 – user1352057

我bxslider工作在軌道和它的工作是這樣的：

$(document).ready(function() { 

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

    }); 
    });

和css：

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

來源

2016-10-03 22:01:12 ChaosPredictor

無法設置圖像bxSlider的下/上一個「控制

回答

相關問題