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
Best Answer
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 anynoConflict
functions as Require wouldn't allow that in the first place.Try this:
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:
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: