【问题标题】:Nivo slider displaying numbers instead of background imageNivo 滑块显示数字而不是背景图像
【发布时间】:2014-07-27 11:01:55
【问题描述】:

我正在介绍一个非常奇怪的情况。我在网站上添加了一个 nivo 滑块,但是当我在幻灯片上打开 controlnav 时,导航器由数字组成。问题是我想使用项目符号而不是那些数字。我尝试添加 text-indent:-9999px 但这不起作用。我以前用过Nivo很多次,这是第一次发生。该脚本是新的,据我所知,没有可能导致它的脚本或 css 问题

网站在这里:http://minimaltheme01.brideappeal.com/

知道为什么会发生这种情况吗? 谢谢!

【问题讨论】:

    标签: javascript nivo-slider


    【解决方案1】:

    默认情况下,nivo 滑块显示数字。要重新设置它们的样式并显示项目符号而不是数字,您可以使用主题,或者您可以选择编写自己的 css 来设置它们的样式。

    查看documentation 了解如何包含主题。

    您需要稍微更改为 html。

    查看这 2 个 js fiddles 以获得(粗略的)有主题和没有主题的示例。

    http://jsfiddle.net/cyZH2/ - 没有

    http://jsfiddle.net/8Tafp/ - 与

    在默认主题 css 文件中,它包含以下将链接显示为项目符号的样式。

    .theme-default .nivoSlider a {
        border:0;
        display:block;
    }
    
    .theme-default .nivo-controlNav {
        text-align: center;
        padding: 20px 0;
    }
    .theme-default .nivo-controlNav a {
        display:inline-block;
        width:22px;
        height:22px;
        background:url(bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin: 0 2px;
    }
    .theme-default .nivo-controlNav a.active {
        background-position:0 -22px;
    }
    

    【讨论】:

    • 我也遇到过这个问题,我用的是默认主题和深色主题,都没有把数字变成项目符号
    • 在你的第二个 Jsfiddle 中,jsfiddle.net/8Tafp - 与。我没有看到项目符号和编号
    • @Citra45Abadi 感谢您的提醒。托管图像资产的域已被删除。当我今天晚些时候有时间的时候。我会更新小提琴。
    猜你喜欢
    • 2012-10-16
    • 2019-07-13
    • 1970-01-01
    • 2015-11-18
    • 1970-01-01
    • 1970-01-01
    • 2023-04-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多