current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top
up vote 2 down vote favorite
1

I am trying to bring banner scroll in magento2. I am using owl carousel for this purpose. Everything have done and implemented and is showing in firefox without any errors. But when checked in chrome, i found jquery not defined error. After some diggings, i found we need to use call it as "require" to trigger jquery. So i have modifed the js and still firefox is rendering everything correctly, but in chrome its still the issue. Script currently i have

require([ 'jquery', 'jquery/ui'], function($){

   $("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
    });

});

I have tried different kinds, but every time chrome is giving me this error see

could anybody assist me in this? Thanks.

share|improve this question
    
plz display your requirejs-config.js – Rakesh Feb 25 at 6:41
    
I have not written that js. I have just tried to call a phtml file in homepage using below {{block class="Magento\Framework\View\Element\Template" name="test_file" template="Magento_Theme::html/test.phtml"}} that test.phtml file contain above js. – Shyam Krishna Sreekumar Feb 25 at 6:49
    
you have to defined owlCarousel js inside requirejs-config.js – Rakesh Feb 25 at 7:08
up vote 3 down vote

I have the same issue and i have fix it by following solution. please try it.

Step 1:
Please open owl.carousel.js file and add below code at the top of actual jquery(owl.carousel.js) script

define([
    'jquery'
], function () {

and now add the end bracket at the end of the jquery(owl.carousel.js) file.

});

its done for owl.carousel.js...

Step 2:
Now please create one file at root(Namespance_Module) of the extensions. Name: requirejs-config.js

and please add this code

var config = {
    map: {
        '*': {
            owlcarousel: 'Namespance_Module/js/owl.carousel'
        }
    }
};

Step 3:
Now in your phtml file (template file) please write code as per below:

require([ 'jquery', 'owlcarousel'], function(){
   jQuery(document).ready(function () {
      jQuery("#owl-demo").owlCarousel({
        items: 1,
        autoplay: true,
        autoplayTimeout: 5000,
        autoplayHoverPause: true,
        dots: false,
        nav: true,
        navRewind: true,
        animateIn: 'fadeIn',
        animateOut: 'fadeOut',
        loop: true
      });
   });
});
share|improve this answer
    
i am not created a module. i have done a phtml file and called inside Magento_Theme template and called inside homepage page. where should i put that requirejs-config.js ? – Shyam Krishna Sreekumar Feb 26 at 7:38
    
In default Magento 2, you will get this file at below location. [Magento_root]/vendor/magento/module-theme/view/frontend/req‌​uirejs-config.js So you can create same file in your current theme directory. Let me know if you still require my help. – mapaladiya Feb 26 at 8:34
    
still no luck. I am trying to call a phtml file in homepage. That phtml file contain slider code. Also written requirejs config file in theme root. No luck. everytime stuck with error:requirejs.org/docs/errors.html#mismatch Error: Mismatched anonymous define() module: function () { (function ($, window, document) { var Carousel = { – Shyam Krishna Sreekumar Feb 26 at 9:01
    
i referred this: cookie-code.net/magento-2/… – Shyam Krishna Sreekumar Feb 26 at 9:02
up vote 1 down vote

Try this

require([ 'jquery', 'jquery/ui'], function($){ 
$(document).ready(function($) {
   console.log('running');
   // your script
});});
share|improve this answer
    
This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Murtuza Zabuawala Dec 2 at 8:21
    
This is valid answer, This is not a comment. – Rakesh Dec 2 at 8:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.