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?

Improve this question
1
  • + for answer acceptance :)
    – Shoaib Munir
    Aug 13, 2019 at 5:37

1 Answer 1

Reset to default
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
17
  • 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, 2019 at 17:36
  • 1
    Check my updated answer, this will work in any theme. Even in luma
    – Shoaib Munir
    Aug 6, 2019 at 4:23
  • Can you give any full tutorial link for this?
    – Kowsigan Atsayam
    Aug 6, 2019 at 8:29
  • Where I can insert images?
    – Kowsigan Atsayam
    Aug 6, 2019 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, 2019 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.