In this Article, we will learn how to integrate owl carousel slider in Magento 2. The Owl carousel slider is most popular carousel slider plugin to list products and images. You can put owl-slider in your featured products, new products, sale product, Best Selling products etc.
Now, we will start to learn step-by-step.
Step 1: First, you need to create custom module in magento 2 with required files.
Step 2: Then, we need to create template file with below code in app/code/Mageclues/OwlSlider/view/frontend/templates/slider.phtml file. If you want to add product slider than just replace image tag with product div/li tag.
<!DOCTYPE html>
<html>
<body>
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
<div class="item"><img src="https://placeimg.com/640/480/tech"/></div>
</div>
</div>
</body>
</html>Step 3: Then, you need to put owl js code in app/code/Mageclues/OwlSlider/view/frontend/web/js/slider.js file.
require(['jquery', 'owlcarousel'], function($) {
$(document).ready(function() {
$('.owl-carousel-slider').owlCarousel({
loop: true,
nav: true,
navText: [
"<i class='fa fa-caret-left'></i>",
"<i class='fa fa-caret-right'></i>"
],
autoplay: true,
autoplayHoverPause: false,
margin: 10,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 4
}
}
});
});
});Step 4: Now, you need to configure slider.js file and slider.phtml in app/code/Mageclues/OwlSlider/view/frontend/layout/owlslider_index_index.xml layout file. If you want to put slider in your Home page or any other page in website then put below code in your page layout file and no need to create layout file(owlslider_index_index.xml)
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
layout="1column"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Mageclues_OwlSlider::js/slider.js" async="async" />
</head>
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template"
name="slider.demo"
template="Mageclues_OwlSlider::slider.phtml" />
</referenceBlock>
</body>
</page>
Step 5: You need to put owl slider in your app/code/Mageclues/OwlSlider/view/frontend/requirejs-config.js file and paste this below code in file.
var config = {
paths: {
owlcarousel: "Mageclues_OwlSlider/js/owl.carousel"
},
shim: {
owlcarousel: {
deps: ['jquery']
}
}
};You must need to put Owl-carousel css and js file in your module web folder. You can use this code in your other phtml file or other layout where you want to call this slider.
I hope this article is helpful for you. please left comment if you have any query about Owl slider integration.
Thank You ):
