用于自定义图像项目符号的Nivo滑块

Nivo-Slider for custom Image Bullets

本文关键字：Nivo 滑块 符号 项目 自定义 图像 用于      更新时间：2023-09-26

我正在尝试创建自定义图像来替换控制导航的"数字"。结果将类似于这个

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

有什么解决办法吗？如有任何帮助，我们将不胜感激！

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

这是我在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！

相关文章：