Using the 'Orbit' Slider of ZURB Foundation

If you want to user the ZURB Foundation Orbit slider in the skin you first need to add a Text/Html module in the place where you want the slider to appear.

Go to the Settings of the module and change the container to the 'Slider' container and save.

IMPORTANT : Edit the contents of the Text/Html and change the edit mode to 'Basic Text box' and the render mode to 'html' or 'raw'

Use the following html code:

<ul class="example-orbit" data-orbit>


    <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1" />

    <div class="orbit-caption"> Caption One. </div>


  <li class="active">

    <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />

    <div class="orbit-caption"> Caption Two. </div>



    <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3" />

    <div class="orbit-caption"> Caption Three. </div>




Add a new '<li></li>' for each slider you would like.

For options for the slider please refer to the options guide on the Foundation site found here.

« Back to Index

Last edited Aug 8, 2014 at 1:32 PM by gmBarlow, version 2