Menu icon Foundation
Height 0px of Orbit slider

Hi,
this simple slider doesn't work (view the code below)
The "height" attribute of

    is set to "0px" of orbit js

    Can you help me please?

    Thanks

<section class="row">
<ul data-orbit 
    data-options="animation:slide;
      animation_speed:1000;
      pause_on_hover:true;
      navigation_arrows:true;
      bullets:false;
      timer_speed:8000;
      slide_number:false;
      variable_height:true;">
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    
</ul>
</section>
<!--end main-slider-->
            

         

Orbitheight

Hi,
this simple slider doesn't work (view the code below)
The "height" attribute of

    is set to "0px" of orbit js

    Can you help me please?

    Thanks

<section class="row">
<ul data-orbit 
    data-options="animation:slide;
      animation_speed:1000;
      pause_on_hover:true;
      navigation_arrows:true;
      bullets:false;
      timer_speed:8000;
      slide_number:false;
      variable_height:true;">
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    <li>
        <figure>
            <a href="#/"><img src="<#$PATH_SERVER#>images/slide_01.jpg" width="1000" height="500" alt="" /></a>
        </figure>
    </li>
    
</ul>
</section>
<!--end main-slider-->
            

         
Prathap over 5 years ago

@Luca Spanò, This is the problem with foundation, no easy way to handle things especially js.
Each slide is getting auto-paused and there is no doc to easily re-initiate the slider eg: autoplay if the slider is paused?

Joe Workman about 5 years ago

My pull request to fix this just got merged into the master branch! Should be all fixed now... https://github.com/zurb/foundation/pull/4795

Luca Spanò about 5 years ago

I solved the problem adding this js lines:
```Javascript
window.onload=function(){

$(window).trigger('resize');/it prevents the "height:0px" style of the .../

};
```

Mat Light about 5 years ago

Are You sure, the content meaning the figure-Elements have a height-Dimension?
Check with browser debug tool. Normally Orbit-Slider resizes to content dimensions.
If not, try a fixed height with !important to see if it makes a diffrence.

sldavidson about 5 years ago

$( window ).resize(function()
{
var orbit_height = $( '.orbit-container img:first' ).height();

if ( orbit_height > 0 )
{
$( '.orbit-container' ).css( 'min-height', orbit_height + 'px' )

} else {

$( '.orbit-container' ).css( 'min-height', '300px' );    

}
});