将 nivoslider 数字更改为项目符号,即使使用主题也不起作用
changing nivoslider numbers into bullets, not working even using theme
所以对于nivoslider主题,数字应该根据bullets.png变成子弹吧?好吧,这很奇怪,因为在我的例子中,数字仍然是数字。
我正在使用默认主题和深色主题,两者都不会将数字更改为项目符号。
当我检查浏览器控制台时没有错误...(我正在使用 chrome 浏览器,也在 mozilla firefox 上测试过,仍然显示数字,而不是项目符号)
这个question-answer说只使用主题会改变数字,那里也提供了fiddle,第二个fiddle使用默认主题但我没有看到项目符号,箭头或数字
从这个 answer,它说我只需要评论 text-indent
和 CSS 文件中的图像 background
。但这不会让 controlnav 项目符号消失吗?
这是我的问题 link http://alpha.rajafotocopy.com/sumatra/portal.html(请使用 chrome 移动视图,因为我仍在先构建移动设备)
有什么办法可以解决这个问题....?
要包含的代码:
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 theme-dark class 不是 nivo-controlNav
的父 class
<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>
所以对于nivoslider主题,数字应该根据bullets.png变成子弹吧?好吧,这很奇怪,因为在我的例子中,数字仍然是数字。 我正在使用默认主题和深色主题,两者都不会将数字更改为项目符号。
当我检查浏览器控制台时没有错误...(我正在使用 chrome 浏览器,也在 mozilla firefox 上测试过,仍然显示数字,而不是项目符号)
这个question-answer说只使用主题会改变数字,那里也提供了fiddle,第二个fiddle使用默认主题但我没有看到项目符号,箭头或数字
从这个 answer,它说我只需要评论 text-indent
和 CSS 文件中的图像 background
。但这不会让 controlnav 项目符号消失吗?
这是我的问题 link http://alpha.rajafotocopy.com/sumatra/portal.html(请使用 chrome 移动视图,因为我仍在先构建移动设备)
有什么办法可以解决这个问题....?
要包含的代码:
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 theme-dark class 不是 nivo-controlNav
的父 class <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>