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

Question

我正在使用 Nivo 滑块...

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

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

如果有人可以提供帮助，我将不胜感激。

桑迪普

Answer 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。您还可以使用定位将箭头放在幻灯片中所需的位置。

Answer 2

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

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

Answer 3

在你的文件中包含这一行

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

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