Magento – Ultimo – ‘Related products’ owl Carousel

After some testing I have found the issue. The div section with a class of columns is set to display:flex on screen sizes 767px or below. This display setting is causing the viewpoint to expand to the maximum size. As the Owl Carousel is large in length, the viewpoint expands to accommodate this.

Obviously a display setting of flex is better for smaller views, so to overcome this issue, setting overflow to hidden, scroll or auto on the div.column.main has fixed the issue.

I'm not 100% sure if this will have any repercussions later on, but for now this has fixed the issue and may help anyone else with the same problem.

First define js lib in requirejs-config.js

var config = {
   "shim": {
      "owlcarousel": [
         'jquery'
       ]
   },
   "paths": {
      "owlcarousel": "Vendor_Module/js/owlcarousel/owl.carousel.min"
   }

};

Then in place you want to call carousel, place js script below

<script type="text/javascript">
   //<![CDATA[
            require([
                'jquery',
                'owlcarousel'
            ], function(jqy, owl){
                jqy('#featured_product .filter-products .owl-carousel').owlCarousel({
                    // Your code
                });
            });
   //]]>
</script>