jquery - 将 nivoslider 数字更改为元素符号,即使使用主题也不起作用

标签 jquery css nivo-slider

所以对于 nivoslider 主题,数字应该根据 bullets.png 变成子弹,对吗?好吧,这很奇怪,因为在我的例子中,数字仍然是数字。 我正在使用默认主题和深色主题,两者都不会将数字更改为元素符号。

当我检查浏览器控制台时没有错误...(我使用的是 chrome 浏览器,也在 mozilla firefox 上测试过,仍然显示数字,而不是元素符号)

这个question-answer说只要使用主题就会改变数字,那里也提供了 fiddle ,第二个 fiddle 使用默认主题,但我没有看到元素符号、箭头或数字

从这个answer ,它说我只需要从 CSS 文件中注释 text-indent 和图像 background 。但这不会让 controlnav 元素符号消失吗?

这是我的问题的链接 http://alpha.rajafotocopy.com/sumatra/portal.html (请使用 chrome 移动 View ,因为我仍然首先构建移动设备)

有什么办法可以解决这个....?

要包含的代码片段:

dark.css nivoslider 主题

.theme-dark .nivoSlider a {
border:0;
display:block;
}

.theme-dark .nivo-controlNav {
text-align: left;
padding: 0;
position: relative;
z-index: 10;
}

.theme-dark .nivo-controlNav a {
display:inline-block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat 0 2px;
text-indent:-9999px;
border:0;
margin: 0 2px;
}

 .theme-dark .nivo-controlNav a.active {
 background-position:0 100%;
 }

nivoslider.css

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
  text-align:center;
  padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
 }
.nivo-controlNav a.active {
    font-weight:bold;
 }

Jquery.nivoslider.js

//Default settings
$.fn.nivoSlider.defaults = {
    effect: 'random',
    slices: 15,
    boxCols: 8,
    boxRows: 4,
    animSpeed: 500,
    pauseTime: 3000,
    startSlide: 0,
    directionNav: true,
    controlNav: true,
    controlNavThumbs: false,
    pauseOnHover: true,
    manualAdvance: false,
    prevText: 'Prev',
    nextText: 'Next',
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
};

我的 HTML

<div id="slider" class="slider-wrapper theme-dark">

        <img src="resource/bca.png"/>
        <img src="resource/home.png"/>
        <img src="resource/bca.png"/>

</div>

最佳答案

在你的 html 主题中,dark 类不是 nivo-controlNav 的父类

 <div class="slider-wrapper theme-dark">  
    <div id="slider">
    <img src="resource/bca.png"/>
    <img src="resource/home.png"/>
    <img src="resource/bca.png"/>
    </div>

 </div>

关于jquery - 将 nivoslider 数字更改为元素符号,即使使用主题也不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40836789/

相关文章:

javascript - 在插入另一个元素之前和之后垂直居中搜索框

javascript - 所有浏览器的 CSS 渐变简化

javascript - 如何将 css 样式应用于带有 td 和 input 标签的动态 tr?

javascript - Jquery引用错误: invalid assignment left-hand side

javascript - 位置 : fixed, 没有按预期工作

css - 推特 Bootstrap : less compilation taking a long time

javascript - 禁用光标/编辑但保持聚焦能力

html - 图像 slider 首先闪烁错误的图像

wordpress - nivoSlider 和外部 jquery 之间的 jquery 冲突

javascript - Nivo slider 在 IE 中显示问题