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

    Create new file named owlcarousel.js in js,


    Create a css file and add it in css folder


    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


    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">

    And add javascript in bootom of the same page

    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds
                    items : 5


    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.