Question

我想让nivoSlider在这个网站http://fritech.co.uk/上工作，它有三张图片

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

然而，nivoSlider只显示其中一个，总是最重要的一个。我不确定这里出了什么问题。任何帮助将不胜感激。

Answer 1

您的问题是您将#slideshow ID添加到html中的错误容器中：

<div id="top" class="bordered-section">
    <div id="slideshow" class="section theme-nivo">
        <div class="ribbon"></div>
        <div class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

ID应放在图像的容器上，用作背景图像。

固定。

<div id="top" class="bordered-section">
    <div class="section theme-nivo">
        <div class="ribbon"></div>
        <div id="slideshow" class="nivoSlider">

            <img src="http://placehold.it/260x180" alt="Our inhouse skills" />
            <img src="http://placehold.it/260x180" alt="Modern technologies" />
            <img src="http://placehold.it/260x180" alt="Ruggedly tested software" />
        </div>
    </div>
</div>

您可以在插件Documentation下找到正确的用法。

Answer 2

发现它！

请更改此

<div id="slideshow" class="section theme-nivo">
    <div class="ribbon"></div>
    <div class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

对此：

<div class="section theme-nivo">
    <div class="ribbon"></div>
    <div id="slideshow" class="nivoSlider">
        <img src="static/img/logos.png" alt="Our inhouse skills" />
        <img src="static/img/atlanta.png" alt="Modern technologies" />
        <img src="static/img/boston.png" alt="Ruggedly tested software" />
    </div>
</div>

NivoSlider期望顶级元素中的所有子元素都是图像，如果元素不是图像，它将查找它可以在该元素中找到的第一个图像。（见这里）

https://github.com/gilbitron/Nivo-Slider/blob/master/jquery.nivo.slider.js#L44

这就是为什么你得到一个未定义图像和徽标图像的循环。因为功能区元素不包含任何图像，并且nivoSlider元素中的第一个图像是徽标。

Answer 3

有些事情是错误的，也许您正在请求服务器或该文件夹中不存在的图像。因为在firefox控制台（ FireBug ）中，它会抛出错误

<强>未定义 “NetworkError：404 Not Found - http://fritech.co.uk/undefined”

否则一切都很好。请仔细检查您要在滑块中加载的图像。

希望这有帮助。

Answer 4

有关您的情况的文档，

我刚遇到类似的事情，“ k未定义”..

它恰好是title标记

中缺少的img属性

<img title="" src="http://placehold.it/260x180" alt="Our inhouse skills" />

Answer 5

我有同样的问题尝试将你的js更改为此 http://pastebin.com/7QPV2rgr

nivoSlider未定义的资源

5 个答案: