aneesahmadweb@gmail.com     03040836207

    First of all you should requirejs-config.js file in theme,

    Create new file named owlcarousel.js in js,

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

    Create a css file and add it in css folder

    app/design/frontend/pakage_name/theme_name/Magento_Theme/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')?>">

    Now create requirejs-config.js file

    app/design/frontend/pakage_name/theme_name/Magento_Theme/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 class="products list items product-items owlslider">
       <ul>
         <li>Slide1</li>
         <li>Slide2</li>
         <li>Slide3</li>
         <li>Slide4</li>
         <li>Slide5</li>       
      </ul>
    </div>

    And add javascript in bootom of the same page

    (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
                });
            });
        });
    })();

    Note:

    Dont forget to run php bin/magento setup:static-content:deploy .

    About Author

    You may also like

    No Comment

    You can post first response comment.

    Leave A Comment

    Please enter your name. Please enter an valid email address. Please enter a message.