Menu icon Foundation
Add OWL Carousel in Foundation 6

Hi, I'm new Foundation and I need some help. I have a project where I inserted orbit slider, however, the design is different and I need a library called Java Script Owl Carousel.

 

The problem is I have no idea how to implement it because of the traditional way does not work on Bootstrap Foundation in June.

 

I could guide step by step to install any JS library?

 

thank you very much.

JavaScriplibraryowl carousel

Hi, I'm new Foundation and I need some help. I have a project where I inserted orbit slider, however, the design is different and I need a library called Java Script Owl Carousel.

 

The problem is I have no idea how to implement it because of the traditional way does not work on Bootstrap Foundation in June.

 

I could guide step by step to install any JS library?

 

thank you very much.

Rafi Benkual about 2 years ago

Have you seen our lessons? There is a lesson on adding to the ZURB Stack and many others.

http://zurb.com/university/lessons/adding-on-to-a-great-foundation

What type of site are you building with Foundation and Owl?

Michelle Child about 1 year ago

Hey Rafi,

I just tried to add owl carousel to my site per the instructions from the link above and I'm still getting 'OwlCarousel is not a function' when I try to initialize it. Has anything changed in the last few months that would make these instructions irrelevant?

 

Thanks,

Michelle

Gabriel Bajada 6 months ago

Has anyone managed to do this? I'm stuck here and would love some help please.

Derek Evans 22 days ago

Here's how I got this running in Foundation 6.4+ (in case someone stumbles across this thread like I did a short while ago trying to figure this thing out):

1. Install Owl Carousel

npm install --save owl.carousel

You should end up with owl.carousel in your node_modules folder and an owl.carousel entry in your dependencies list.

2. In your app.js file, add window.jQuery = $; after window.$ = $;, and then require the owl js file

window.$ = $;
window.jQuery = $;

require('owl.carousel/dist/owl.carousel.min.js');

3. Somewhere after $(document).foundation();, add the js for your carousel:

$(document).foundation();

$(".owl-carousel").owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

4. You'll also need to add the owl carousel css. I'm not sure if this is the right way to do this, but it worked for me. To your app.scss file add

@import 'node_modules/owl.carousel/src/scss/owl.carousel.scss';

This video helped explain things a lot: https://www.youtube.com/watch?v=ofiNeA40QJA&t=4s

juguza 22 days ago

Safety is a very important aspect when it comes to all kinds of activities. Whether it is for construction, work at home, office job.

best chainsaw helmet    |

 

chainsaw helmet

zmirli nazim 21 days ago

I need to use Owl Carousel in Foundation.

How can I use the Javascript code below?

CCleaner Happy Wheels VLC

 

$(document).foundation();

jQuery(document).ready(function(){

});