如何用图像（箭头）替换 Nivo 滑块“上一个”和“下一个”答案

【问题标题】：how to replace Nivo slider "prev" & "next" with images(arrows)如何用图像（箭头）替换 Nivo 滑块“上一个”和“下一个”
【发布时间】：2013-04-02 14:54:44
【问题描述】：

我正在使用 Nivo 滑块...

我已经设法使用 css 隐藏了滑块底部的数字。

我现在要做的是用我在 Photoshop 中制作的箭头替换“上一个”和“下一个”... 我一直在这里和谷歌上搜索，但我找不到解决方案。

如果有人能帮忙，我将不胜感激。

桑迪普

【问题讨论】：

这些选项被明确命名为 prevText 和 nextText，从它们的命名中我假设它们就是这样做的，插入 纯文本。可能最简单的解决方案是将这些保留在原处，并使用其中一种图像替换技术将文本隐藏并替换为背景图像……

标签： slider nivo-slider

【解决方案1】：

我会为此使用 CSS 图像替换。所以：

.nivo-directionNav .nivo-prevNav {
  background:transparent url(path/to/image) 0 0 no-repeat;
  height:20px; /*height of img*/
  width:10px; /*width of img*/
  text-indent:-10000px; /*moving the default text*/
  overflow:hidden; /*hiding the default text*/
}

然后重复 .nivo-nextNav。您还可以使用定位将箭头放在幻灯片中您想要的位置。

【讨论】：

【解决方案2】：

您可以通过使用自己的图像和设置创建新主题来做到这一点，请参阅此处：http://support.dev7studios.com/articles/nivo-slider-jquery-plugin/creating-custom-themes

或者通过将按钮的 png 图像更改为现有主题。

【讨论】：

读者应该注意这仅对 Nivo Slider 的 WordPress 插件版本有效。
这是怎么回事？它对两个版本都有效。
你是对的，我的错。我猜这个链接与另一个链接混淆了。

【解决方案3】：

在你的文件中包含这一行

<link href="<?php echo get_template_directory_uri(); ?>/default/default.css" rel="stylesheet" type="text/css" />

并在 .theme-default .nivo-directionNav 中包含 background:url(arrows.png) no-repeat; 并在存储在默认文件夹中的 default.css 文件中。请注意，箭头图像必须存储在与放置 defalut.css 的文件夹相同的文件夹中。希望这会有所帮助。

【讨论】：