将 nivoslider 编号更改为项目符号,即使使用主题也不起作用

Posted

技术标签:

【中文标题】将 nivoslider 编号更改为项目符号,即使使用主题也不起作用【英文标题】:changing nivoslider numbers into bullets, not working even using theme 【发布时间】:2017-04-11 17:33:52 【问题描述】:

所以对于 nivoslider 主题,数字应该根据 bullets.png 变成子弹,对吧?这很奇怪,因为在我的情况下,数字仍然是数字。 我使用的是默认主题和深色主题,两者都不会将数字变为项目符号。

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

这个question-answer 说只使用主题会改变数字,那里还提供了小提琴,第二个小提琴使用默认主题但我没有看到项目符号、箭头或数字

从这个answer,它说我只需要从CSS文件中评论text-indent和图像background。但这不会使 controlnav 子弹消失吗?

这是我的问题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>

【问题讨论】:

【参考方案1】:

在你的 html theme-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>

【讨论】:

以上是关于将 nivoslider 编号更改为项目符号,即使使用主题也不起作用的主要内容,如果未能解决你的问题,请参考以下文章

将 Nivo Slider 更改为仅淡入淡出过渡

Word文档项目编号后边的一段空白怎么调整?

如何将订单参考更改为编号参考

将月份编号更改为月份名称

将 varchar 更改为 bigint

将 GST 编号字段的小数分隔符更改为逗号