Owl Carousel not working in Chrome

Question

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

Answer 1

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']
        }

    }
};

Answer 2

Try below code. In your custom require js config. at below path code.

app/design/frontend/[theme name]/default/requirejs-config.js

 var config = {
    map: {
        '*': {
            'theme_name/jquery':        'js/jQuery-v1.3.1',
            'bootstrap':                'js/bootstrap.min',
            'bootsnav':                 'js/bootsnav',
            'cpowlcarousel':            'js/owl.carousel.min',
            'bootstrapselect':          'js/bootstrap-select.min',
            'matchheight':              'js/jquery.matchHeight-min'
            'twitter' :                 'js/twitter/widgets'

        }
    },
    shim: {

        'cpowlcarousel': {
            'deps': ['theme_name/jquery']
        },

    }

};

And Add script on your custom.js file.

    require(['jquery', 'jquery/ui', 'cpowlcarousel'], function ($) {
    var owl = $('#carousel .owl-carousel');
    owl.owlCarousel({
        margin: 10,
        responsiveClass:true,
        nav: true,
        autoplay:true,
        autoplayTimeout:3000,
        autoplayHoverPause:true,
        loop: true,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 3
            },
            1000: {
                items: 4
            }
        }
    });
});

I hope it will help you.