How to Add Owl Carousel Slider in Magento 2

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.

 

Related Posts:

Comments (2)