How to Add Owl Carousel Slider in Magento 2

In this tutorial, Today I will explain to how to add owl carousel slider in Magento 2. Owl carousel slider is one of the most used carousel slider plugin to product list. You can set it in your most viewed product slider, new product slider, featured product slider etc.

So, Let’s see that how to add owl carousel slider in Magento 2.

You may also like this :

How to Add Slick Slider in Magento 2

1) Let’s assume that you have created simple module. Now, you have to add this below code in app/code/RH/OwlSlider/view/frontend/templates/slider.phtml file

Copy Code


<!--
/**
 * Created By : Rohan Hapani
 */
-->
<!DOCTYPE html>
<html>
    <body>
        <div class="carousel-wrap">
          <div class="owl-carousel">
            <div class="item"><img src="http://placehold.it/350x300?text=1"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=2"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=3"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=4"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=5"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=6"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=7"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=8"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=9"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=10"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=11"></div>
            <div class="item"><img src="http://placehold.it/350x300?text=12"></div>
          </div>
        </div>
    </body>
</html>

2) After that, you need to owl js code in app/code/RH/OwlSlider/view/frontend/web/js/common.js file.

Copy Code


/**
 * Created By : Rohan Hapani
 */
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: true,
            responsive: {
                0: {
                  items: 1
                },
                600: {
                  items: 3
                },
                1000: {
                  items: 5
                }
            }
        });
    });
});

3) Then, you need to call common.js file and slider.phtml in app/code/RH/OwlSlider/view/frontend/owlslider_index_index.xml custom layout file :

Copy Code


<?xml version="1.0"?>
<!--
/**
 * Created By : Rohan Hapani
 */
-->
<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="RH_OwlSlider::js/common.js" async="async" />
    </head>
    <body>
        <referenceBlock name="content">
            <block class="Magento\Framework\View\Element\Template"
                name="proslider"
                template="RH_OwlSlider::productslider.phtml" />
        </referenceBlock>
    </body>
</page>

4) In Last, You need to add owl slider in your app/code/RH/OwlSlider/view/frontend/requirejs-config.js file and paste this below code :

Copy Code


/**
 * Created By : Rohan Hapani
 */
var config = {
    paths: {
        owlcarousel: "RH_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.

That’s it !!!

You can check full module here : Click here

I hope this blog is easy to understand how to add owl carousel slider in Magento 2.In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with a proper solution.

Stay Safe and Stay Connected !!

Post Views: 14,163