Magento – Owl Carousel not working in Chrome

chrome-browserjquerymagento2owl-carousel

I've got a carousel (Owl Carousel) on my home page that doesn't work on Chrome but does work in other browsers. I believe it is something to do with Jquey loading after the carousel but I'm not 100%.

The code on the homepage goes like this

 <script type="text/javascript" xml="space">// <![CDATA[

    require([
        'jquery',
        'twitter',
        'owlcarousel',
    ], function ($) {   
          $(document).ready(function () {
           $("#carousel").owlCarousel({
                navigation: true,
autoplay:true,
                items: 1
            });
        });
    });
]]></script>

The URL is – https://www.pop-upbanners.com/

Thanks

Michael

Best Answer

Try this:

var config = {
    '*': {
        'owlcarousel': 'js/owl-carousel/owl.carousel'
    },
    shim: {

        'owlcarousel': {
            deps: ['jquery']
        }

    }
};

Add above code in your custom require js config file code.

var config = {
    map: {
        '*' : {
            'owlcarousel' : 'js/owl-carousel/owl.carousel',
            'twitter' : 'js/twitter/widgets'
        }
    }
};

So it will be like this:

var config = {
    '*' : {
        'owlcarousel' : 'js/owl-carousel/owl.carousel',
        'twitter' : 'js/twitter/widgets'
    },
    shim: {

        'owlcarousel': {
            deps: ['jquery']
        }

    }
};
Related Topic