Foundation 5 Orbit

by Yassar Khan

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.orbit.min.js"></script>
<ul class="example-orbit" data-orbit data-options="timer_speed:4000;animation:fade;animation_speed:3000;">
  <li>
    <img src="https://foundation.zurb.com/sites/docs/v/5.5.3/assets/img/examples/satelite-orbit.jpg" alt="slide 1" />
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li class="active">
    <img src="https://foundation.zurb.com/sites/docs/v/5.5.3/assets/img/examples/andromeda-orbit.jpg" alt="slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    <img src="https://foundation.zurb.com/sites/docs/v/5.5.3/assets/img/examples/launch-orbit.jpg" alt="slide 3" />
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

JavaScript

$(document).foundation();