2

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

enter image description here

  • In console what error are occurring ? – Himanshu Jan 31 at 5:39
  • there is no error coming. I just don't get the slider. – Bhakti Thakkar Jan 31 at 5:39
3

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

  • could you please give me a new jquery version and migrate js link. – Bhakti Thakkar Jan 31 at 5:28
  • still its not working for me – Bhakti Thakkar Jan 31 at 5:48
  • Check if magento is calling 2 jquery at the same time in DOM – Shoaib Munir Jan 31 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.