2

I want to know the directory of the slider template so I can override, Edit and customize the magento cms slider.

Ammar Joma
  • 11
  • 3
Kapil Parmar
  • 41
  • 1
  • 3

1 Answers1

1
  1. Add owlcarousel.js file
app/design/frontend/pakage_name/theme_name/Vendor_Module/web/js
  1. Add css file
app/design/frontend/pakage_name/theme_name/Vendor_Module/web/css
  1. Call css file in your template file using
        <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">
  1. create requirejs-config.js file
        Vendor_Module/requirejs-config.js

        var config = {
             paths: {            
            'owlcarousel': "Vendor_Module/js/owlcarousel"
        },   
        shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
        }
        };
  1. Create slider.phtml file
<div id="owlslider" class="owl-carousel">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>       
   </ul>
</div>

<script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: true, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
</script>
  1. app/design/frontend/pakage_name/theme_name/Vendor_Module/frontend/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="custom.slider" template="Vendor_Module::slider.phtml" />
        </referenceContainer>
    </body>
</page>
Sweety Masmiya
  • 1,371
  • 10
  • 21