1

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?

  • + for answer acceptance :) – Shoaib Munir Aug 13 '19 at 5:37
2

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

| improve this answer | |
  • I am not using custom theme now. I want to apply straight in luma theme. So where is luma theme files located? – Kowsigan Atsayam Aug 5 '19 at 17:36
  • 1
    Check my updated answer, this will work in any theme. Even in luma – Shoaib Munir Aug 6 '19 at 4:23
  • Can you give any full tutorial link for this? – Kowsigan Atsayam Aug 6 '19 at 8:29
  • Where I can insert images? – Kowsigan Atsayam Aug 6 '19 at 9:13
  • 1
    migration.js would not be the reason, there should be 2 callings of jQuery. you need to search on code and remove one. There should be one jquery in dom. You have figured out a good point (Y) – Shoaib Munir Aug 6 '19 at 15:26

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.