How_to_add_owlcarousel_slider_magento2.txt

How to add slider using OwlCarousel in Magento2?

Download this module:V4U OwlCarousel

Copy this module and paste in magento-root/app/code folder

Run the following commands:

php bin/magento module:status

php bin/magento module:enable V4U_OwlCarousel

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

You can call slider.phtml file in block by using 

{{block class="Magento\Framework\View\Element\Template" template="V4U_OwlCarousel::slider.phtml"}}

Or

Use this code directly in CMS Page & Block

<div class="title>">
<h2>V4U OwlCarousel Slider</h2>
</div>
      <div class="owl-carousel owl-theme">
        <div class="item">
          <h4>1</h4>
        </div>
        <div class="item">
          <h4>2</h4>
        </div>
        <div class="item">
          <h4>3</h4>
        </div>
        <div class="item">
          <h4>4</h4>
        </div>
        <div class="item">
          <h4>5</h4>
        </div>
        <div class="item">
          <h4>6</h4>
        </div>
        <div class="item">
          <h4>7</h4>
        </div>
        <div class="item">
          <h4>8</h4>
        </div>
        <div class="item">
          <h4>9</h4>
        </div>
        <div class="item">
          <h4>10</h4>
        </div>
        <div class="item">
          <h4>11</h4>
        </div>
        <div class="item">
          <h4>12</h4>
        </div>
      </div>
      
  <script type="text/javascript">
        require(['jquery', 'vpowlcarousel'], function ($) {
            jQuery(document).ready(function () {
                jQuery(".owl-carousel").owlCarousel({
                    loop:true,
                    responsiveClass:true,
                    responsive:{
                        0:{
                            items:1,
                            nav:true,
                            dots: true,
                        },
                        600:{
                            items:2,
                            nav:false,
                            dots: true,
                        },
                        1000:{
                            items:4,
                            nav:true,
                            loop:false,
                            dots: true,
                            navText: [ "<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
                        }
                    }
                });
            });
        });
    </script>

Support Version: Magento 2.3.x,2.4.x