Foundation 4 Orbit Slider All Images at Once/Not Scrollable

Question

I can't figure out why the slider doesn't perform exactly like the one on the documentation page here: http://foundation.zurb.com/docs/components/orbit.html

Our site is here:

Here's the code. I think that it is supposed to be this minimal markup and that the rest of the stuff is supposed to be added later:

      <ul data-orbit>
  <li>
    <img src="img/sliders/lightcubebeta1000.png" >
    <div class="orbit-caption">...</div>
  </li>
  <li>
    <img src="img/sliders/hammertime1000.png">
    <div class="orbit-caption">...</div>
  </li>
  <li>
   <img src= "img/sliders/alarmclockbeta1000.png">
    <div class="orbit-caption">...</div>
  </li>
</ul>    

Initialization of the Javascript:

 <!-- Javascript for Orbit Image Slider -->     
<script>
        document.write('<script src=`javascripts/vendor/'
            + ('__proto__' in {} ? 'zepto' : 'jquery')
            + '.js><\/script>')
</script>

<script src= "javascripts/foundation/foundation.js"></script>
<script src= "javascripts/foundation/foundation.dropdown.js"></script>
<script src= "javascripts/foundation/foundation.section.js"></script>
<script src= "javascripts/foundation/foundation.topbar.js"></script>
<script src= "javascripts/foundation/foundation.orbit.js"></script>

<!-- Initialize Foundation -->

<script>

    $(document).foundation('orbit', {
  timer_speed: 10000,
  pause_on_hover: true,
  resume_on_mouseout: true,
  animation_speed: 500,
  bullets: true,
  stack_on_small: true,
  container_class: 'orbit-container',
  stack_on_small_class: 'orbit-stack-on-small',
  next_class: 'orbit-next',
  prev_class: 'orbit-prev',
  timer_container_class: 'orbit-timer',
  timer_paused_class: 'paused',
  timer_progress_class: 'orbit-progress',
  slides_container_class: 'orbit-slides-container',
  bullets_container_class: 'orbit-bullets',
  bullets_active_class: 'active',
  slide_number_class: 'orbit-slide-number',
  caption_class: 'orbit-caption',
  active_slide_class: 'active',
  orbit_transition_class: 'orbit-transitioning'
});

</script>

Despite my best efforts to copy the example on the docs page, the orbit image slider displays all the images at once top to bottom with the bullets and the arrows. Did I make a mistake or is there something wrong with the example in the foundation 4 docs?

Thank You!

Answer 1

Thank you lolmaus. It turned out that after changing the <ul class="data-orbit"> back to <ul data-orbit> and by changing:

<script>
  document.write('<script src=/js/vendor/'
    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js><\/script>');
</script>

to

<script>
        document.write('<script src=`javascripts/vendor/'
            + ('__proto__' in {} ? 'zepto' : 'jquery')
            + '.js><\/script>')
</script>

It then appears to load zepto or jquery correctly, along with the orbit script. I must have missed the change, because all the javascript files are in the new folder. I must have been quite tired. Thanks again!

Answer 2

You seem to have failed to carefully follow the Javascript Installation section of Foundation documentation.

You missed at least two steps:

• require jQuery;
• initialize Foundation.

Also, the code you provided in the question is different from the code you have on the actual page. On the page you use <ul class= "data-orbit"> while the correct code is <ul data-orbit>.

Here's a demo of everything set up properly: http://jsbin.com/ixuluw/3/edit