Nivo slider, before it's triggered all the images are visible on the page

Question

I'm using the nivo slider on a site and before it's loaded all the images are static on the page for about a second. Once the nivo sliders has loaded they all sit in the slider.

Is there a way to get around this? To make the slider trigger first before any of the page is loaded? The site it www.pegasusproperty.co.uk the code I'm using for the slider is

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        animSpeed: 700,
        pauseTime: 4000,
    });
});
</script>    this code is in the head of the document

It happens best in Firefox

regards

Jeff Wilbert · Accepted Answer · 2011-11-23T15:04:08.817

6

Try this

Set you div slider to display: none;

<div id="slider" style="display: none;">

And on page load/document ready show it

$(window).load(function() { 
    $('#slider').show().nivoSlider({ effect: 'fade', animSpeed: 700, pauseTime: 4000 }); 
});

Edit: I think your solution could actually be a lot simpler. You have your slider div set to a fixed width and height but your images expand it bigger, simply set the overflow of the div to hidden should solve the problem

#slider {
 overflow: hidden;   
}

edited Nov 23 '11 at 15:04

answered Nov 23 '11 at 14:41

Jeff Wilbert

4,400
1
20
35

user1047444, I edited my answer and added another solution that should work just as well and be simpler. – Jeff Wilbert Nov 23 '11 at 14:53
There is no reason not to chain them... `$('#slider').show().nivoSlider({` – Sparky Nov 23 '11 at 14:58
@Sparky672 point taken. Just been a personal pref to keep jQuery method calls and plugin calls separate. – Jeff Wilbert Nov 23 '11 at 15:07
@JeffWilbert...Thank you very much! I tried the solution above the 'Edit:'. That works perfect for me! +1!!! – Vikram Sep 04 '14 at 15:49

score 0 · Answer 2 · answered May 28 '17 at 17:20

0

My solution was just to add this class:

.nivoSlider {
    overflow: hidden;
    max-height: 460px;
}

You can setup the height you need.

answered May 28 '17 at 17:20

Nicole Mino

1

score 0 · Answer 3 · answered Nov 23 '11 at 14:51

I prefer to use visibility:hidden; rather than display:none; since it does not remove the element from the content flow. I think it's visually better not to have content shifting around after the page loads.

<div id="slider" style="visibility:hidden;">

Make it visible after the images fully load without any additional content shifting.

$(window).load(function() { 
    $('#slider').css({'visibility':'visible'}).nivoSlider({
      effect: 'fade',
      animSpeed: 700,
      pauseTime: 4000,
    });
});

score 0 · Answer 4 · answered Feb 08 '12 at 10:00

Like sparky I approached this with visibility so that other content didn't shift.

If like me you are using Views Nivo Slider for drupal then you will set your animation speed etc from within views so all you need to set in your jQuery script is the visibility. Note I prefer a slightly different way of expressing the jQuery css

$(window).load(function() { 
    $('#slider').css({visibility: 'visible'});
});

In your page the following code is fine, but I prefer to set styles in css.

<div id="slider" style="display: none;">

Nivo slider, before it's triggered all the images are visible on the page

4 Answers4

Linked