自定義圖像項目符號的Nivo滑塊

我試圖創建自定義圖像來替換Control-Nav的「數字」。結果會像this 自定義圖像項目符號的Nivo滑塊

一直在嘗試各種不同的方式來修改nivo css，但它不工作。添加以下選項不起作用。

.nivo-controlNav a:nth-child(1) { 
    background-image:url(‘image/banner_button.png’); 
} 
.nivo-controlNav a:nth-child(2) { 
    background-image:url(‘image/banner_button2.png’); 
}

這些都沒有。

.nivo-controlNav a { 
    cursor:pointer; 
    width:50px; 
    height:50px; 
    background:url('image/banner_button2.png'); 
}

圖像路徑的工作原理是我成功地在我的測試網站上顯示圖像。我只需要2個子彈，因爲我只有2個橫幅圖像才能顯示。

有沒有解決這個問題的方法？任何幫助將不勝感激！

來源

2014-09-02 Gene

您可能必須更具體：.nivo-controlNav> a.nivo-control {style ...}＆.nivo-controlNav> a.nivo-control.active {style ...} – Christina 2014-09-02 04:49:24

@Christina Can你進一步解釋？我偶然發現了這個網站，並試圖無效地使用它。 – Gene 2014-09-02 04:52:15

該CSS必須更具體。我已經使用CSS描述了項目符號，並且它工作正常。打開他們的CSS，看他們如何指定項目符號上的樣式，然後使用它們的特性。 – Christina 2014-09-02 04:56:57

找到了解決方案，我想我會發布解決方案，以幫助任何人面臨這個問題。訣竅是導入一個主題，在我的情況下，我將使用默認主題。

這是我以下代碼添加nivoslider在HTML

<div class="slider-wrapper theme-default"> 
    <div id="slider" class="nivoSlider" style="margin-top:-17px;border:none;padding:0px; z-index:1"> 
    <img src="./image/banner1.jpg" alt="" /> 
    <img src="./image/banner2.jpg" alt="" /> 
    </div> 
    </div>

而且加入這行來的默認主題的CSS。

.nivo-controlNav a:nth-child(1) { 
background-image:url(banner_button.jpg); 
} 
.nivo-controlNav a:nth-child(2) { 
background-image:url(banner_button2.jpg); 
}

希望有幫助。特別感謝@Christina！

來源

2014-09-04 02:03:33 Gene

自定義圖像項目符號的Nivo滑塊

回答

相關問題