1

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.

enter image description here

What I do wrong there?

Thank you in advance.

  • +1 for answer acceptance :) – Shoaib Munir Jul 8 at 4:10
2

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.

1

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

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.