Magento 2 - OWL Carousel 2 in related products issue

Question

I try to setup OWL Carousel for Related Products in Magento 2.

I overwrite this file: Magento_Catalog/templates/product/list/items.phtml

this is my custom code:

            <div  id="owlslider" class="products wrapper grid products-grid products-<?= /* @escapeNotVerified */ $type ?>">
                <ol class="products list items product-items">
                     ...............
                </ol>
            </div>

<script type="text/javascript" xml="space">


    (function  () {
        require(["jquery","owlcarousel"],function() {
            'use strict';
            jQuery.noConflict();
            jQuery(document).ready(function() {
                jQuery("#owlslider").owlCarousel({
            autoplay: true,
            dots: false,
     loop:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }


                });
            });
        });
    })();
</script>

But my owl carousel it not display well, I mean inline. My owl carousel items are now one under the other.

What I do wrong there?

Thank you in advance.

Answer 1

in your theme app/design/frontend/Vendor/YourTheme/requirejs-config.js add owlcarousel js entry:

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

then call owl carousel in any phtml file or js file using this:

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

        // the below must be as per your requirement

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

Hope this will resolve issue.

Answer 2

In Magento 2,You can use this simple module for any slider. https://github.com/vrajeshkpatel/magento2-owlcarousel