在 Nivo Slider 中更改上一个/下一个导航的位置答案

【问题标题】：Change position of prev/next nav in Nivo Slider在 Nivo Slider 中更改上一个/下一个导航的位置
【发布时间】：2012-03-19 18:24:58
【问题描述】：

我正在使用 Nivo Slider jquery 插件，大部分情况下它都很好。我能够自己做一些样式（即更改图像周围的框架，更改标题位置等），但我无法终生弄清楚如何更改下一个/上一个的位置箭头。

我想让箭头显示在标题栏的右侧：

这可能吗？我已经在 .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;
}

它会产生这样定位的箭头：

【问题讨论】：

请提供代码/小提琴，以便我们查看问题出在哪里或如何完成此操作。
background-position: 不是您移动元素的方式...它用于在元素本身内部周围移动背景图像。

标签： css nivo-slider

【解决方案1】：

这应该是可能的 - 您是否尝试过更改“top”“left”和“right”css 值？其中一个箭头应该有上/左，而另一个箭头应该有上/右（至少这些是默认设置）。这些用于确定导航箭头的位置，而背景位置是指图像精灵（用于悬停效果等）。

编辑

尝试使用这个 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 Slider 中选择您希望导航 html 标记的位置。在这种情况下，您可以将其放置在标题框中，然后将其相对定位（类似于它当前在整个滑块中的工作方式）。如果没有，这个 CSS 解决方案应该可以工作。

【讨论】：

不；他们都没有。将现有的 css 添加到 OP。
右边和左边的值在那里，但在这个例子中，导航相对定位在滑块内部。这就是为什么 nextNav 有 right:15px （它是滑块边缘右侧的 15px），反之亦然他的 prevNav。如果您希望它位于标题栏的右侧，我的建议是绝对定位它。我将使用示例代码编辑我的原始答案。
您是否有理由删除了 nivo-directionNav 定义中的大部分行？现在，您的代码中使用的图像没有实际的 URL。
我的意思是让您将我的行添加到现有行中，而不是完全替换它。我会相应地更新我的答案。