Menu icon Foundation
How-to install Owl Carousel in Foundation 5

I installed Foundation 5 via Codekit and am trying to get Owl Carousel to work since Foundation wants to give up on Orbit and frustrate everyone (hear the sarcasm Foundation?). I'm new with Foundation 5 and a beginner with jQuery. I followed Owl's How-to page to a "T" (http://owlgraphic.com/owlcarousel/#how-to) leaving out the installation of jQuery since Foundation installs it, though I'm not even sure things have been installed correctly with Codekit's Foundation installation. Here's (code below) what I have in my index.html page that Codekit installed—am I missing anything that would get Owl Carousel working?

I'm adding a screenshot of my site's bower_components so you can see what Codekit installed.

Foundation's docs for javascript installation are different from what I'm seeing in my site's installation so I'm not sure what I'm doing wrong.

Again, I followed Owl Carousel's How-to page to a "T" with the exception of leaving out jQuery installation because Foundation already installs it.

So, if Foundation installs it, why didn't Owl Carousel work? I'm trying to figure out what I'm missing.

Please let me know if you need to see more about my installation attempt. It would help if we had one great post on this so others can learn how to get it working since Orbit has been deprecated.

<!--this is in the <head>--->
<script src="bower_components/modernizr/modernizr.js"></script>
    
    
<!--this is before </body>--->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
            

         

Bower components

owl carouselFoundation 5codekitjquery

I installed Foundation 5 via Codekit and am trying to get Owl Carousel to work since Foundation wants to give up on Orbit and frustrate everyone (hear the sarcasm Foundation?). I'm new with Foundation 5 and a beginner with jQuery. I followed Owl's How-to page to a "T" (http://owlgraphic.com/owlcarousel/#how-to) leaving out the installation of jQuery since Foundation installs it, though I'm not even sure things have been installed correctly with Codekit's Foundation installation. Here's (code below) what I have in my index.html page that Codekit installed—am I missing anything that would get Owl Carousel working?

I'm adding a screenshot of my site's bower_components so you can see what Codekit installed.

Foundation's docs for javascript installation are different from what I'm seeing in my site's installation so I'm not sure what I'm doing wrong.

Again, I followed Owl Carousel's How-to page to a "T" with the exception of leaving out jQuery installation because Foundation already installs it.

So, if Foundation installs it, why didn't Owl Carousel work? I'm trying to figure out what I'm missing.

Please let me know if you need to see more about my installation attempt. It would help if we had one great post on this so others can learn how to get it working since Orbit has been deprecated.

<!--this is in the <head>--->
<script src="bower_components/modernizr/modernizr.js"></script>
    
    
<!--this is before </body>--->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
            

         

Bower components
Jonathan Urban almost 5 years ago

Hi my friend,

You can take a look to Picotto Theme: a WP theme based on Foundation. I'm using the Owl Carousel like here: http://picotto-wp.urbanjonathan.com/image-gallery/

Do you have a demo link to see your issue ?

See you,
Jonathan.