javascript - Orbit slider not loading on page refresh? -

i'm having issue orbit slideshow, part of zurb's foundation.

http://visiondemo.com.au/tmp/

if click on header logo or land on homepage clicking link, slideshow loads perfectly. no issues. however, if hit refresh, it's missing.

also, when page refreshed , slideshow missing, resizing window makes magically appear.

any ideas how can loading @ times?

cheers.

hmm answer quite hacky way of doing things think it'll work in way or another..

firstly fix height: 0px problem in data-orbit. since have chosen content of orbit actual caption then, try add in <style> tag or in style.css. (#note medium-up block only, supply height small block).

.slideshow.show-for-medium-up > li {     height: 421px !important; } 

now thats , working, you'll see orbit now.. apparently problem appear. display orbit before content's .orbit-caption finishes styling list. append small fix style.css

/* orbit fix */      ul[data-orbit] {         margin: 0;         padding-left: 0;         list-style-type: none;     }      /* initially, hide slides... */     ul[data-orbit] li,     ul[data-orbit] .orbit-caption {         display: none;     }      /* ...except first 1 */     ul[data-orbit] li:first-child { display: block; }      /* show slides once .orbit-container loaded */     .orbit-container ul[data-orbit] li,     .orbit-container ul[data-orbit] .orbit-caption {         display: block;     } 

update: think thats because show image when screen small, recommend adding this,

.slideshow.show-for-small-only img {       /* change img height here */       height: 200px; /* change see fit */ }