Question

我试图创建自定义图像来替换Control-Nav的“数字”。结果类似于this

尝试了各种不同的方法来修改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个横幅图像只能显示。

这有什么解决方案吗？任何帮助将不胜感激！

Answer 1

找到了解决方案，我想我会发布解决方案，以帮助任何人面对这个问题。诀窍是导入主题，在我的情况下，我将使用默认主题。

这是我在html中添加nivoslider的以下代码

   <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！

Nivo-Slider用于自定义图像项目符号

1 个答案: