How to implement owl carousel in luma theme in Magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/284477

  •  09-03-2021
  •  | 
  •  

Question

The images for the slider should be chosen in the admin panel. I am new to magento. Kindly tell me how to implement owl carousel. I don't want to use free extensions.

I included the css file link in cms_page_view.xml like this-> 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="Magento_Cms::css/owl.carousel.css" />

</head>
<body>
    <referenceContainer name="content">
        <block class="Magento\Cms\Block\Page" name="cms_page"/>
    </referenceContainer>
</body>

Is this correct?

Was it helpful?

Solution

Since you need specific to luma theme, My suggestion that you do it in module leve.

Add requirejs-config.js file in app/code/Vendor/Module/view/frontend/requirejs-config.js add owlcarousel js entry:

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

then add your owl js file in: app/code/Vendor/Module/view/frontend/web/js/owl.carousel.js

You need to run frontend deployment command after this.

then you can 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 help

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top