更改Nivo Slider中prev/next nav的位置

我使用的是Nivo Slider jquery插件，並且大部分都很好。我可以自己做一些造型（即改變圖像周圍的框架，改變標題的位置等），但是我不能在我的生活中弄清楚如何改變下一個/上一個的位置箭頭。更改Nivo Slider中prev/next nav的位置

我希望有在標題欄右側顯示的箭頭：

enter image description here

這可能嗎？我已經調整了背景：位置值在.theme-default a.nivo-nextNav（和prevNav）中，但似乎無法達到我想要的位置。

編輯補充CSS

這是導航按鈕現有CSS：

theme-default .nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
.theme-default a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
.theme-default a.nivo-prevNav { 
    left:15px; 
}

它產生定位這樣箭頭：

enter image description here

來源

2012-03-19 EmmyS

請提供代碼/小提琴，以便我們可以看到問題出在哪裏或如何完成。 – w3uiguru 2012-03-19 19:10:35

'background-position：'不是你如何移動元素......它用於在元素本身圍繞_移動背景圖像。 – Sparky 2012-03-19 21:22:00

它應該是可能 - 你有沒有嘗試改變「頂部」「左」和「右」的CSS值？其中一個箭頭應該有頂部/左側，而另一個頂部/右側（這些是至少默認設置）。這些用於確定導航箭頭的位置，而background-position指的是圖像精靈（用於懸停效果等）。

編輯

嘗試使用這個CSS：

.theme-default .nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    position:absolute; 
} 
.theme-default a.nivo-nextNav { 
    top:500px; //you'll need to tweak the top and right values to get it into proper position 
    right: 300px; 
} 
.theme-default a.nivo-prevNav { 
    top: 500px; // again, tweak these to fit your layout 
    left:250px; 
}

它可能NIVO滑塊內可以選擇你想要的導航HTML標記去。在這種情況下，您可以將其放置在標題框中，然後相對放置它（類似於當前在整個滑塊內的工作方式）。如果沒有，這個CSS解決方案應該工作。

來源

2012-03-19 19:08:57

不是;他們都沒有。將現有的CSS添加到OP。 – EmmyS 2012-03-19 20:54:02

右邊和左邊的值都存在，但在本例中，導航相對位於滑塊內部。這就是爲什麼nextNav的權利：15px（它在滑塊邊緣的右側15px），反之亦然，因爲他prevNav。如果你想讓它位於標題欄的右側，我的建議是絕對地定位它。我將用示例代碼編輯我的原始答案。 – 2012-03-19 21:10:54

是否有理由將nivo-directionNav中的大部分行刪除了一個定義？現在沒有用於代碼中的圖像的實際URL。 – EmmyS 2012-03-19 21:56:17

更改Nivo Slider中prev/next nav的位置

回答

相關問題