Menu icon Foundation
Orbit Slider Problem inFoundation 5

Hi !

This code (copyed from a Stackoverflow) example works:

<div class="row">
  <div class="large-12 columns">
        <ul class="example-orbit" data-orbit>
      <li>
        <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
        <div class="orbit-caption"> Caption One. </div> 
      </li> 
      <li>
        <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" /> 
        <div class="orbit-caption"> Caption Two. </div> 
      </li>
      <li> 
        <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" /> 
        <div class="orbit-caption"> Caption Three. </div> 
      </li>
    </ul>
  </div>
</div>
            

         

This code (example from the Foundation Docs) does not. It gives me a white orbit slider and the text is overlapped by the backward key.

<ul class="example-orbit-content" data-orbit> 
    <li data-orbit-slide="headline-1"> 
        <div> 
            <h2>Headline 1</h2> 
            <h3>Subheadline</h3> 
        </div> 
    </li> 
    <li data-orbit-slide="headline-2"> 
        <div> 
        <h2>Headline 2</h2> 
        <h3>Subheadline</h3> 
        </div> 
    </li> 
    <li data-orbit-slide="headline-3"> 
        <div> 
        <h2>Headline 3</h2> 
        <h3>Subheadline</h3> 
        </div> 
    </li> 
</ul>
            

         

How do i create a Content Slider like on the example page (the one with the blue background ?
http://foundation.zurb.com/docs/components/orbit.html
Clearly not with the example code Foundation provided...

Foundation 5Orbithtml

Hi !

This code (copyed from a Stackoverflow) example works:

<div class="row">
  <div class="large-12 columns">
        <ul class="example-orbit" data-orbit>
      <li>
        <img src="http://placehold.it/1000x300/A92B48/fff" alt="slide 1" />
        <div class="orbit-caption"> Caption One. </div> 
      </li> 
      <li>
        <img src="http://placehold.it/1000x300/EE964D/fff" alt="slide 2" /> 
        <div class="orbit-caption"> Caption Two. </div> 
      </li>
      <li> 
        <img src="http://placehold.it/1000x300/FDC43D/fff" alt="slide 3" /> 
        <div class="orbit-caption"> Caption Three. </div> 
      </li>
    </ul>
  </div>
</div>
            

         

This code (example from the Foundation Docs) does not. It gives me a white orbit slider and the text is overlapped by the backward key.

<ul class="example-orbit-content" data-orbit> 
    <li data-orbit-slide="headline-1"> 
        <div> 
            <h2>Headline 1</h2> 
            <h3>Subheadline</h3> 
        </div> 
    </li> 
    <li data-orbit-slide="headline-2"> 
        <div> 
        <h2>Headline 2</h2> 
        <h3>Subheadline</h3> 
        </div> 
    </li> 
    <li data-orbit-slide="headline-3"> 
        <div> 
        <h2>Headline 3</h2> 
        <h3>Subheadline</h3> 
        </div> 
    </li> 
</ul>
            

         

How do i create a Content Slider like on the example page (the one with the blue background ?
http://foundation.zurb.com/docs/components/orbit.html
Clearly not with the example code Foundation provided...

Robin Bruinsma over 5 years ago

The docs uses extra css (docs.css), this is the extra css for the orbit-content slider:

.example-orbit-content li div {
    background: none repeat scroll 0 0 #2BA6CB;
    color: #FFFFFF;
    padding: 30px 40px;
}
.example-orbit-content li div h1, .example-orbit-content li div h2, .example-orbit-content li div h3 {
    color: #FFFFFF;
}

Florian over 5 years ago

Thanks !
How can i find out if the examples shown use custom css ?

Robin Bruinsma over 5 years ago

I always use Firebug a extension for Firefox: https://addons.mozilla.org/nl/firefox/addon/firebug/
And then i inspect the element and can see what css is used on what element.