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 exampleapp/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.
- Copy
owl.carousel.js
toapp/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/
. Add your
requirejs
moduleapp/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js
.define([ 'jquery', 'owlCarousel' ], function($) { return function(config, element) { $(element).owlCarousel(config); }; });
Add
requirejs
config toapp/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>