How to call Owl Slider in Magento2

  • If we want to add Owl Slider in Magento 1.X then we follow the below steps.

    1. Copy owl.carousel.min.js and owl.carousel.js and paste into skin/frontend/pakage_name/theme_name/js
    2. Copy owl.carousel.css and paste into skin/frontend/pakage_name/theme_name/css
    3. Goto app/design/frontend/pakage_name/theme_name/layout/page.xml and call js and CSS

    And we can use Owl Slider anywhere in Magento 1.X site.

    So in Magento 2 how we can call Owl slider and it should be called everywhere in the site so I can use whenever I want.

    For this problem, I have referred this link but it's not up to the mark and it's not working.

    Right now I have placed Owl slider js in app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js but it's not working.

    Any help would be appreciated.

  • You have to created one requirejs-config.js file inside your theme like,

    First Add owlcarousel.js file inside,

    app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js
    

    Add your css inside,

    app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css
    

    call css inside your tempalte file using,

    <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">
    

    or call css inside a layout file (best practice), depending on your needs :

    • whole site : default.xml for example app/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
    • Home page : cms_index_index.xml
    <page ...>
    <head>
         <css src="Magento_Catalog::css/owlcarousel.css"/>
    </head>
    <body>...</body> </page>
    

    Now create requirejs-config.js file

    Magento_Catalog/requirejs-config.js
    

    Define your slider,

    var config = {
        paths: {            
                'owlcarousel': "Magento_Catalog/js/owlcarousel"
            },   
        shim: {
            'owlcarousel': {
                deps: ['jquery']
            }
        }
    };
    

    Now you can use owlcarousel under any phtml file,

    <div id="owlslider" class="products list items product-items">
       <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>       
      </ul>
    </div>
        <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>
    

    Remove pub/static folder content and run php bin/magento setup:static-content:deploy command.

    but where can I add css? and I need to add css in require.js file??

    you cant add css into require.js file

    I have 3 owl slider files **owl.carousel.css** , **owl.carousel.js**,**owl.carousel.min** and need to add this all files so where can I add and call these all files so I can use in whole magento site wherever I want?

    app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

    i have updatead answer plz check

    if I place owl slider js in magento-catalog then I can use in whole site?

    yes you have to create one requirejs-config.js file same as above in your anotuyer module or theme folder and you can use it.

    thanks for give me solution but if I place in magento-catalog folder then I can use only for this module but I want to use for whole site so it's better to add js and css in root theme folder's web folder.

    its not neccesary to put inside web and you can call each place using above method also you can call any place by giving just path.

    Hi, does this work in Microsoft Edge? Do you have any example? Thanks.

    Hai , im try it above format i got console error: `require.js:141 Uncaught Error: Script error for: owl http://requirejs.org/docs/errors.html#scripterror at makeError (require.js:166) at HTMLScriptElement.onScriptError (require.js:1681)` Let Me know what mistake im did @Rakesh

    Please share your question as new post and all the code which you have tried.

    hi, How about ajax-loader.gif and owl.video.play.png, both are used by the css files ?

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM