I am trying to get nivoSlider to work on this site / where it has three images

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

However nivoSlider is only showing one of them, always the top one. I'm not sure what is going wrong here. Any help would be appreciated.

I am trying to get nivoSlider to work on this site http://fritech.co.uk/ where it has three images

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

However nivoSlider is only showing one of them, always the top one. I'm not sure what is going wrong here. Any help would be appreciated.

• javascript
• jquery
• jquery-plugins
• slideshow
• nivo-slider

• can you change static/js/libs/jquery.nivo.slider.pack.js with the development version ? That will make it a lot easier to debug. – Willem D'Haeseleer Commented Mar 30, 2012 at 13:34
• @helmus that's done now. – Meitham Commented Mar 31, 2012 at 9:08

5 Answers 5

Your problem is that you're adding the #slideshow id to the wrong container in your 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>

The ID should be placed on the container of your images which are being used as background images.

Fixed.

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

You can find the proper usage under the plugins Documentation.

Found it !

please change this

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

To this:

<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 expects all children from the top element to be images, if the element is not an image it will look for the first image it can find in that element. ( see here )

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

That is why you are getting a loop of an undefined image and the logo image. Because the ribbon element does not contain any images, and the first image from the nivoSlider element is the logo.

There is some thing wrong, maybe you are requesting for an image which do not exist on server or in that folder. Because in firefox console (FireBug) it is throwing this error

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

else everything looks fine. Please double check the images you are trying to load in slider.

Hope this helps.

For documentation about your situation,

i just encountered something similar, "k is not defined" ..

it happened to be a missing title attribute in the img tag

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

I had the same problem try change your js to this http://pastebin./7QPV2rgr