How to call Owl Slider in Magento2

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.


first you need to put slider at,

Step1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Step2 Do mapping for the file in themename/themename/Magento_Theme/requirejs-config.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Step3 : I have used in bestseller file as below where you need to include slider mapping, themename/themename/Magento_Catalog/templates/product/bestseller_list.phtml:

<script>

    require([
        'jquery',
        'owlcarouselslider'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery("#best-seller-carousel").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

Step4 : For that structure should be as below,

<div id="demo">
<div id="best-seller-carousel">
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
    <div class="item"><h1>7</h1></div>
    <div class="item"><h1>8</h1></div>
</div>
</div>


You can also visit more links @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/


If you want to add owl carousel in Magento 2 way, you should follow these steps.

  1. Copy owl.carousel.js to app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.
  2. Add your requirejs module app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

    define([
        'jquery',
        'owlCarousel'
    ], function($) {
        return function(config, element) {
            $(element).owlCarousel(config);
        };
    });
    
  3. Add requirejs config to app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

    var config = {
        map: {
            '*': {
                'carousel': 'js/carousel',
                'owlCarousel': 'js/owl-carousel/owl.carousel'
            }
        }
    };
    

How to use:

  • use the data-mage-init attribute to insert Owl Carousel in a certain element:

    <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
        <div class="item">Item 1</div>
        ...
        <div class="item">Item n</div>
    </div>
    
  • use with <script type="text/x-magento-init" />:

    <div id="owl-carousel" class="owl-carousel">
        <div class="item">Item 1</div>
        ...
        <div class="item">Item n</div>
    </div>
    
    <script type="text/x-magento-init">
    {
        "#owl-carousel": {
            "carousel": {"option": value}
        }
    }
    </script>