0

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

  • you have issue in your owl.carousel.js here }(jQuery) it could not found jQuery – kunj Aug 6 '18 at 9:14
  • I did try replacing the owl.carousel.js file but it didn't seem to do anything. – Mike Aug 6 '18 at 9:17
  • You need to add load jquery before your js, I have added answer. – kunj Aug 6 '18 at 10:00
0

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

    }
};
0

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.

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.