CODEWITHSUNDEEP
javascriptzurb-foundationorbit
Patrick
Patrick

Reputation: 159

Foundation (3) Orbit Image Slider

I have the following code for an image slider in Foundation 3. 

<div class="row">
    <div class="twelve columns">
         <div id="slider">
              <img src="http://placehold.it/1600x375&text=[img 1]" />
              <img src="http://placehold.it/1600x375&text=[img 2]" />
         </div>
    </div>
</div>

Then, at the end of the file I have the following js in order for it to work. 

<script type="text/javascript">
 $(window).load(function() {
     $('#slider').orbit();
 }); </script>

When I load the page for a little time both images appear stacked until it loads into the Orbit Slider. I really would like to minimize this and not have the images appear until the slider is loaded. I have a very fast VPS setup and something like this has never really been a problem. Is that possible?

Upvotes: 1

Views: 1047

Answers (2)

Adnan
Adnan

Reputation: 11

Just add to <div id="slider"></div> height and overflow:hidden

#slider {
height: 300px;
overflow: hidden;

}

Upvotes: 1

Robin Jonsson
Robin Jonsson

Reputation: 2851

One method is to change the visibility of the <div id="slider"></div>with javascript inside a document.ready function to visible:

$(function() {
    $('#slider').toggle();
    $('#slider').orbit();
});

This of course means you have to specify that the display is none in the css document:

#slider {
    display: none;
}

Upvotes: 1

Related Questions