How to implement owl carousel in luma theme in Magento 2?
-
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?
La 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
Licencié sous: CC-BY-SA avec attribution
Non affilié à magento.stackexchange