1

I am trying to use slider in my magneto custom module

I did Following steps:

1 create a file requirejs-config.js

var config = {
    map: {
        '*': {
            my: 'Vendor_Module/js/owl.carousel',
        }
    }
};
  1. created a owl.carousle.js fine in web/js

    jQuery(document).ready(function($) {
    var owl = $("#owl-demo1");
         owl.owlCarousel({
        // Most important owl features
    margin:10,       
    items : 4,
    itemsCustom : false,
    itemsDesktop : [1199,2],
    itemsDesktopSmall : [900,4],
    itemsTablet: [768,3],
    itemsTabletSmall: [700,2],
    itemsMobile : [479,1],
    
    
    singleItem : false,
    itemsScaleUp : false,
    
    
    //Basic Speeds
    slideSpeed : 200,
    paginationSpeed : 800,
    rewindSpeed : 1000,
    
    //Autoplay
    autoPlay : true,
    stopOnHover : false,
    
    // Navigation
    navigation : true,
    navigationText: ["Left","Right"],
    rewindNav : true,
    scrollPerPage : true,
    
    
    // Responsive 
    responsive: true,
    responsiveRefreshRate : 200,
    responsiveBaseWidth: window,
    
    
    
    //Mouse Events
    dragBeforeAnimFinish : true,
    mouseDrag : true,
    touchDrag : true,
    
    
    
    });
    });
    

The slider is not working giving an error in the console

ReferenceError: jQuery is not defined error

2

Replace your requirejs-config.js with the below code

var config = {
paths: {
    'my': 'Vendor_Module/js/owl.carousel'
},
 shim: {
    'my': {
        deps: ['jquery']
    },
}
};

and then wherever you're calling this js you'd call like below

require(['jquery','my'],function($){
    $(document).ready(function(){

        // the below must be as per your requirement

        $("#owl-demo").owlCarousel({
            navigation : true,
            autoplay: true,
            autoplayHoverPause: false,
            autoplaySpeed: 2000,
            loop: true,
            smartSpeed: 450
          });
    });
});

Hope this helps.

  • i did the same but its giving me error Loading failed for the <script> with source “http://localhost/magento23s/pub/static/version1556888431/frontend/Magento/luma/en_US/my.js”. – Waqar Ali May 3 at 13:04
1

You need include jquery in top of your js as below

 require(['jquery', 'my'],function($){ 
  Your script code 
 });

Also edit the require-config.js with single quotes for "my" object

var config = {
     map: {
        '*': {
            'my': 'Vendor_Module/js/owl.carousel',
        }
    }
};
  • i included Your given code in my owl.carousle.js now i am getting a console error as Error: Script error for: js/my http://requirejs.org/docs/errors.html#scripterror – Waqar Ali May 3 at 12:21
  • check updated answer – aravind May 3 at 12:23
  • Still same Error – Waqar Ali May 3 at 12:29
  • Have you done static-content deploy? – aravind May 3 at 12:34
  • yes i have done that here is a warning Loading failed for the <script> with source “http://localhost/magento23s/pub/static/version1556886980/frontend/Magento/luma/en_US/my.js”. – Waqar Ali May 3 at 12:39
1

Add in your requirejs-config.js

var config = {
    deps: [
    "js/my" // connect your js file
],
...
0

add your code in jquery require like this, also add your "my" in require, so that it will also check if owl is ready:

require([
    'jquery','my'
], function($){
    jQuery(document).ready(function($) {
        var owl = $("#owl-demo1");
        owl.owlCarousel({
            // Most important owl features
            margin:10,
            items : 4,
            itemsCustom : false,
            itemsDesktop : [1199,2],
            itemsDesktopSmall : [900,4],
            itemsTablet: [768,3],
            itemsTabletSmall: [700,2],
            itemsMobile : [479,1],


            singleItem : false,
            itemsScaleUp : false,


//Basic Speeds
            slideSpeed : 200,
            paginationSpeed : 800,
            rewindSpeed : 1000,

//Autoplay
            autoPlay : true,
            stopOnHover : false,

// Navigation
            navigation : true,
            navigationText: ["Left","Right"],
            rewindNav : true,
            scrollPerPage : true,


// Responsive 
            responsive: true,
            responsiveRefreshRate : 200,
            responsiveBaseWidth: window,



//Mouse Events
            dragBeforeAnimFinish : true,
            mouseDrag : true,
            touchDrag : true,



        });
    });
});
  • Getting error Error: Script error for: my http://requirejs.org/docs/errors.html#scripterror – Waqar Ali May 3 at 12:34
  • and here is a warning in console Loading failed for the <script> with source “http://localhost/magento23s/pub/static/version1556886980/frontend/Magento/luma/en_US/my.js”. – Waqar Ali May 3 at 12:40
  • Have you run deployment script? because this error indicates that you need to run deployment php -dmemory_limit=1G bin/magento setup:static-content:deploy -f and clean command after that php bin/magento cache:clean – Shoaib Munir May 3 at 12:53
  • Yes i have all these already.. – Waqar Ali May 3 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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