Menu icon Foundation
Problem getting functional JS using Foundation 5 Template

My question today is why when I import the html for the Orbit Home Foundation 5 Template and others that I had tried, The JS functions do not work. I have included the JS initializers both in the head tags and body tags am I forgetting to include something else? Thanks. I have spent hours trying to find the solution.

Jsheaderinclude

Jssnippet

Templatepage

Referring to the last image, you can see the the slider only shows the image however there are no directional arrows being displayed. I copied the code exactly as it was provided in the Template page. I have tried filling it with my own photos it just tiles them one on top of the other. Very frustrating. Hope someone can help me out soon thanks!

jsjavascripthtmlFoundationFoundation 5templatessliderjquery

My question today is why when I import the html for the Orbit Home Foundation 5 Template and others that I had tried, The JS functions do not work. I have included the JS initializers both in the head tags and body tags am I forgetting to include something else? Thanks. I have spent hours trying to find the solution.

Jsheaderinclude

Jssnippet

Templatepage

Referring to the last image, you can see the the slider only shows the image however there are no directional arrows being displayed. I copied the code exactly as it was provided in the Template page. I have tried filling it with my own photos it just tiles them one on top of the other. Very frustrating. Hope someone can help me out soon thanks!

Joel Kinzel about 5 years ago

Can you post the actual code for the Orbit carousel?

Also, just FYI, Orbit has been deprecated and is no longer supported. It is still in Foundation, but will likely be removed in a future version.

You can check out alternatives like Slick carousel or Owl carousel.

Chris F. about 5 years ago

Sorry About that. This is all the Code that I have for the Orbit. And thank you for the headsup I will look into another slider then/

Link 1
Link 2
Link 3
Link 4


<hr/>
</div>

This is a content section.
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.

<div class="large-4 columns">
  <img src="http://placehold.it/400x300&text=[img]"/>
  <h4>This is a content section.</h4>
  <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>

<div class="large-4 columns">
  <img src="http://placehold.it/400x300&text=[img]"/>
  <h4>This is a content section.</h4>
  <p>Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong. Eiusmod swine spare ribs reprehenderit culpa. Boudin aliqua adipisicing rump corned beef.</p>
</div>

</div>
  <div class="panel">
    <h4>Get in touch!</h4>

    <div class="row">
      <div class="large-9 columns">
        <p>We'd love to hear from you, you attractive person you.</p>
      </div>
      <div class="large-3 columns">
        <a href="#" class="radius button right">Contact Us</a>
      </div>
    </div>
  </div>

</div>

© Copyright no one at all. Go to town.



Link 1
Link 2
Link 3
Link 4




<script src="/js/vendor/jquery.js"></script> 
<script src="/js/vendor/fastclick.js"></script>
<script src="/js/foundation.min.js"></script>

<script> 
  $(document).foundation({tab: {toggleable: false}}); 

</script>

Joel Kinzel about 5 years ago

Looks like the code might have gotten messed up.

Chris F. about 5 years ago

Solved it. I had to include script tags for the foundation.min.js and vendor/jquery.js in my head tags.