Magento – Magento 2 – Add Owl Slider in Related Products using requirejs-config.js

magento2related-productsrequirejsslider

Theme Level

app/design/frontend/<Vendor>/<Theme>/requirejs-config.js

Owl Carousel JS/CSS path

Vendor_Theme/web/owl.carousel/assets/owl.carousel.css
Vendor_Theme/web/owl.carousel/owl.carousel.js

requirejs-config

var config = {

    paths: {
        'owlcarousel': "Vendor_Theme/web/owl.carousel/owl.carousel"

    },
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        },
    }
};

Related Products path – Vendor/Theme/Magento_Catalog/template/product/list/items.phtml

<div class="owlslider products wrapper grid products-grid>
<ol class="products list items product-items">

 <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $(".owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
</script>
  1. Owl carousel JS is not being called using requirejs-config
  2. How do I add owl carousel to related products ?

The carousel is being added into custom theme and not module.

Best Answer

Please try with below code. Sometime in multi-store in M2 custom js does not load with "owlcarousel", so we need to give full path "Vendor_Theme/web/owl.carousel/owl.carousel".

 <script>
    (function  () {
        require(["jquery","Vendor_Theme/web/owl.carousel/owl.carousel"],function($) {
            $(document).ready(function() {
                $(".owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
</script>
Related Topic