Owl carousel is not working in magento 2

Question

I want to add owl slider in custom theme in magento 2. For that, I added,

\app\design\frontend\Theme\custom\web\css\owl.carousel.min.css \app\design\frontend\Theme\custom\web\js\owl.carousel.js

\app\design\frontend\Theme\custom\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'
        }
    }
};

\app\design\frontend\Theme\custom\Magento_Catalog\templates\featured2.phtml

<div id="demo">
<div id="owl-demo" class="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>
<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>

but I am getting this

Answer 1

The problem is you are calling jQuery in your require statement but you are not passing it into the anonymous function. You are calling the global jQuery and not the jQuery defined by Require JS. When you pass in jQuery, you don't have to use any noConflict functions as Require wouldn't allow that in the first place.

Try this:

<div id="demo">
    <div id="owl-demo" class="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>
<script type="text/javascript">
    require([
        'jquery',
        'owlcarouselslider'
        ], function ($) {
            'use strict';
                $(".best-seller-carousel").owlCarousel({
                autoPlay: 3000,
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

There is no need to pass in owl carousel as that will be defined on the page and the function will therefore be "found".

As a side note, it is always better to not mix your JavaScript in with your template files. If you wanted to pull in a script file in your template you could use something like this:

<script type="text/x-magento-init">
{
  "*": {
    "Magento_Theme/js/custom-slider": {}
  }
}
</script>

And then create a file in your theme at app/design/frontend/{vendor_namespace}/{theme}/Magento_Theme/web/js/custom-slider.js

With js like:

define([
    'jquery',
    'owlcarouselslider'
    ], function ($) {
        'use strict';
            $(".best-seller-carousel").owlCarousel({
            autoPlay: 3000,
            margin:5,
            items : 5,
            itemsDesktop : [1199,5],
            itemsDesktopSmall : [979,5],
            itemsTablet : [768,5],
            navigation : true,
            pagination : false
      });
});

Answer 2

I had faced same issue on my website. Magento 2 used old jquery version and also used migrate js. I simply removed migrate js and updated jquery version on my website, and carousel was working fine after that.

Please try this in your case too. This will also effect other jquery plugins on your websites, and you need to resolve other issues manually, but still this is the only solution I find.