I've strange Nivo Slider loading problem, the left side of the image shows how my slider looks just after entering the website (and this is WRONG) and right - after a while.

The question is why my images are loaded before containing div (with loading animation) and are shown one below another? Of course the main container has position set to relative and every container img is absolutely positioned at top: 0 and left: 0. Any ideas? Tried to put that on jsfiddle, but I believe Nivo isn't supported.

I've strange Nivo Slider loading problem, the left side of the image shows how my slider looks just after entering the website (and this is WRONG) and right - after a while.

The question is why my images are loaded before containing div (with loading animation) and are shown one below another? Of course the main container has position set to relative and every container img is absolutely positioned at top: 0 and left: 0. Any ideas? Tried to put that on jsfiddle, but I believe Nivo isn't supported.

• javascript
• slider
• nivo-slider

5 Answers 5

How do I stop my images stacking down the page before the slider has loaded?

Due to the fact you have to use the $(window).load() function there is a delay before the plugin apply's certain styles to the elements. You can help this by manually applying the above CSS styles to stop the images stacking on the page before the plugin loads.

#slider {
    //See the "style-pack" for image
    background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
    display:none;
}

http://nivo.dev7studios./support/

Next time I'll start with FAQ ;/ Sorry. I hope this will help somebody in the future...

I had the same issue and was able to solve it with the following styles:

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}

Just hide the overflow

.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }

You could try adding 'overflow:hidden' to the css for the container element.

My experience with using Nivo-Slider is when this happens, the nivo-slider.css is not linked correctly to the html page. Double check your links to your stylesheet.