Table of Contents
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.
So, Let’s see that how to add owl carousel slider in Magento 2.
1. Activate Module
Create The Module Configuration File Named Module.Xml
Create app/code/Thecoachsmb/OwlSlider/etc/module.xml file
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_OwlSlider" setup_version="1.0.0">
</module>
</config>
Create Registration.php file for registering module
Create app/code/Thecoachsmb/OwlSlider/registration.php file
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Thecoachsmb_OwlSlider',
__DIR__
);
2. Create Route file routes.xml
Now, the next step is to add an admin router of the module. For that, we need to create a routes.xml file In app/code/Thecoachsmb/OwlSlider/etc/adminhtml/routes.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="standard">
<route id="owlslider" frontName="owlslider">
<module name="Thecoachsmb_OwlSlider"/>
</route>
</router>
</config>
3. The layout structure for the front-end
Then, you need to call common.js file and slider.phtml in app/code/Thecoachsmb/OwlSlider/view/frontend/layout/owlslider_index_index.xml custom layout file :
<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="Thecoachsmb_OwlSlider::js/common.js" async="async" />
</head>
<body>
<referenceBlock name="content">
<block class="Magento\Framework\View\Element\Template"
name="proslider"
template="Thecoachsmb_OwlSlider::slider.phtml" />
</referenceBlock>
</body>
</page>4. Display Images to show on the slider page
Then, we need to create template file with below code in app/code/Thecoachsmb/OwlSlider/view/frontend/templates/slider.phtml file. If you want to add product slider then just replace image tag with product div/li tag.
Content in app/code/Thecoachsmb/OwlSlider/view/frontend/templates/slider.phtml file
In the src tag below, specify the image path.
<div class="carousel-wrap">
<div class="owl-carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>5. Add js file to add functionality to the Slider
After that, you need to put owl js code in app/code/Thecoachsmb/OwlSlider/view/frontend/web/js/common.js file.
require(['jquery', 'owlcarousel'], function($) {
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
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: 3
},
1000: {
items: 5
}
}
});
});
});6. Add owl slider
In Last, You need to add owl slider in your app/code/Thecoachsmb/OwlSlider/view/frontend/requirejs-config.js file and paste this below code :
var config = {
paths: {
owlcarousel: "Thecoachsmb_OwlSlider/js/owl.carousel"
},
shim: {
owlcarousel: {
deps: ['jquery']
}
}
};You need to add css and js file in your module’s web folder. You can use this code in your any phtml file or any layout where you want to call this slider.
I have shared the extension here.
Conclusion
This is simple and best way to use slider in any of the pages of Magento2. This can be implemented with product slider, category slider, etc.
Please feel free to comment if you need any help.
Images are not showing on frontend.
please provide a solution.
I change the img source
Those Images are not existing in folders. Instead of those images you can use your images