Menu icon Foundation
I am unable to adjust Height of the orbit slider

Here is the html that I have used ,

            <ul data-orbit="" id="global-banner">
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%201%20]">
                  
              </li>
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%202%20]">
                  
              </li>
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%203%20]">
                 
              </li>
          </ul>

         

Here is the Javascript that I have used ,

            

         $(document).foundation({
  orbit: {
    animation: 'slide',
    timer_speed: 1000,
    pause_on_hover: true,
    animation_speed: 500,
    navigation_arrows: true,
    bullets: false,
  }
});



I need to set the height of the oribit slider to 288 px how can I do that . Please suggest ,

Orbitsliderheightadjustment

Here is the html that I have used ,

            <ul data-orbit="" id="global-banner">
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%201%20]">
                  
              </li>
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%202%20]">
                  
              </li>
              <li>
                  <img src="http://placehold.it/1000x400&amp;text=[%20img%203%20]">
                 
              </li>
          </ul>

         

Here is the Javascript that I have used ,

            

         $(document).foundation({
  orbit: {
    animation: 'slide',
    timer_speed: 1000,
    pause_on_hover: true,
    animation_speed: 500,
    navigation_arrows: true,
    bullets: false,
  }
});



I need to set the height of the oribit slider to 288 px how can I do that . Please suggest ,


Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

Hey Aravind!

Yep, what Malou said about using images that are 288px high is a good idea.

You could also use this CSS:

.orbit-container
{
  height: 288px;
  width: auto;
}

Hope this helps! And if you have any more questions post again!

Malou Geurts over 5 years ago

You could force the img height to be 288px in your css, or you could use images that are 288px high.
Perhaps something like this:

#global-banner img {
 height: 288px;
 width: auto;
}

Wing-Hou Chan over 5 years ago

Hey Aravind!

Yep, what Malou said about using images that are 288px high is a good idea.

You could also use this CSS:

.orbit-container
{
  height: 288px;
  width: auto;
}

Hope this helps! And if you have any more questions post again!

Rafi Benkual over 5 years ago

Setting width to auto helps keep proportions.

Hari Harker about 3 years ago

Using Foundation 6 and setting max-height in terms of vh fixed the issue for me.

James about 3 years ago

I have retained the width and height of .swiper-container to 100%