Menu icon Foundation

My Posts

No Content

My Comments

Edward Nickerson commented on Kyle De Sousa's post about 2 years

Ok, so I had the same jQuery is not defined error message when trying to import the OWL Carousel jQuery plugin as per the instructions here:
http://zurb.com/university/lessons/adding-on-to-a-great-foundation
In fact I thought it may have to do with OWL, so I tried to replace it with Slick Carousel - and ran into the exact same problem.
After chasing my tail for three days, crying into my keyboard and being generally miserable to be around, I woke up one morning and though hey - why don't I just define jQuery myself!
So in my app.js file I put this and presto - it works. No idea why though.
import $ from 'jquery';

//Adding in this solves the jQuery not defined error:
import jQuery from 'jquery';
import whatInput from 'what-input';

window.$ = $;

//Adding in this is also required
window.jQuery = jQuery;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

$(document).foundation();

I have a custom.js file, added into my config.yml - which runs my other code:
jQuery(document).ready(function ($) {

$('#owl-example').owlCarousel({
    items:3
});

});
An now this works. Maybe it will help solve your problem?

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Kyle De Sousa's post about 2 years

Ok, so I had the same jQuery is not defined error message when trying to import the OWL Carousel jQuery plugin as per the instructions here:
http://zurb.com/university/lessons/adding-on-to-a-great-foundation
In fact I thought it may have to do with OWL, so I tried to replace it with Slick Carousel - and ran into the exact same problem.
After chasing my tail for three days, crying into my keyboard and being generally miserable to be around, I woke up one morning and though hey - why don't I just define jQuery myself!
So in my app.js file I put this and presto - it works. No idea why though.
import $ from 'jquery';

//Adding in this solves the jQuery not defined error:
import jQuery from 'jquery';
import whatInput from 'what-input';

window.$ = $;

//Adding in this is also required
window.jQuery = jQuery;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
//import './lib/foundation-explicit-pieces';

$(document).foundation();

I have a custom.js file, added into my config.yml - which runs my other code:
jQuery(document).ready(function ($) {

$('#owl-example').owlCarousel({
    items:3
});

});
An now this works. Maybe it will help solve your problem?

Posts Followed

Following

  • No Content

Followers

  • No Content