CODEWITHSUNDEEP
javascriptslidernivo-slider
Wordpressor
Wordpressor

Reputation: 7543

Nivo slider loading problem

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.

nivo strange loading

Upvotes: 1

Views: 6726

Answers (5)

emtiyaz
emtiyaz

Reputation: 21

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

Upvotes: 1

Carey Estes
Carey Estes

Reputation: 1564

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.

Upvotes: 0

Phorge
Phorge

Reputation: 11

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

Upvotes: 1

ade123
ade123

Reputation: 2833

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

Upvotes: 0

Wordpressor
Wordpressor

Reputation: 7543

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.com/support/

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

Upvotes: 1

Related Questions