nivoSlider неопределенные ресурсы

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 в неправильный контейнер в своем 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>

Идентификатор должен быть помещен в контейнер ваших изображений, которые используются в качестве фонаimages.

Исправлено.

<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>

Правильное использование вы можете найти в плагинах Документация .

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

Для документации о вашей ситуации,

я только что столкнулся с чем-то похожим: " k не определено " ..

это было пропущенное titleатрибут в теге img

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

Answer 4

У меня была такая же проблема, попробуйте сменить JS http://pastebin.com/7QPV2rgr

Answer 5

Что-то не так, может быть, вы запрашиваете изображение, которого нет на сервере или в этой папке.Потому что в консоли Firefox ( FireBug ) он выдает эту ошибку

undefined "NetworkError: 404 Not Found - http://fritech.co.uk/undefined"

В противном случае все выглядит хорошо. Пожалуйста, дважды проверьте изображения, которые вы пытаетесь загрузить в слайдер.

Надеюсь, это поможет.