Magento 2: Home page slider

For Home Page Slider you need to follow the Steps:
Step 1: Download owl slider and copy and paste the slider file to the following directory as :

• app/design/frontend/Magento/mytheme/Magento_Theme/web/css/owl.carousel.css
• app/design/frontend/Magento/mytheme/Magento_Theme/web/js/owl.carousel.js
• app/design/frontend/Magento/mytheme/Magento_Theme/web/js/owl.carousel.min.js

Step 2: Create a Page for slider in the following directory with the following code:

• app/design/frontend/Magento/mytheme/Magento_Theme/templates/html/home_slider.phtml

home_slider.phtml

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Theme::css/owl.carousel.css') ?>"/>
<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="owl-carousel">
      <div class="block block-static item">
        <div class="static-content" style="right: 65%;">
          <div class="static-title">Baby Bassinet</div>
          <div class="static-desc">baby clothes, shoes, furniture, baby gear &amp; more. Free shipping on select orders over $25</div>
          <div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
        </div>
        <div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-01.jpg'); ?>" alt="Banner-01" /></a></div>
      </div>
      <div class="block block-static item">
        <div class="static-content" style="right: 3%;">
          <div class="static-title">Baby Bassinet</div>
          <div class="static-desc">baby clothes, shoes, furniture, baby gear &amp; more. Free shipping on select orders over $25</div>
          <div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
        </div>
        <div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-02.jpg'); ?>" alt="Banner-02" /></a></div>
      </div>
      <div class="block block-static item">
        <div class="static-content" style="right: 65%;">
          <div class="static-title">Baby Bassinet</div>
          <div class="static-desc">baby clothes, shoes, furniture, baby gear &amp; more. Free shipping on select orders over $25</div>
          <div class="static-link"><a href="<?php echo $block->getUrl(); ?>trina-turk-womens-tara-carmel-crep.html"><span>view more</span></a></div>
        </div>
        <div class="img-content"><a href="#"><img src="<?php echo $block->getViewFileUrl('images/bannerslider-03.png'); ?>" alt="Banner-03" /></a></div>
      </div>
    </div>
  </div>
</div>
<script>
   //require(['jquery', 'Webskitters_Banner/js/jquery.min']);
    require(['jquery', 'Magento_Theme/js/owl.carousel'],function(jQuery){
      jQuery(document).ready(function($){
       jQuery('.owl-carousel').owlCarousel({
            items:1,
            autoplay:true,
            loop:true,
            margin:10,
            responsiveClass:true,
            nav:true,
        })
    });  
    });
</script>

Step 3: Create a block named Banner Slider and call the slider phtml file as:

<div class="banner-home-wrapper">{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/home_slider.phtml" }}</div>

Step 4: after that call the static block in home page by xml:

<!-- banner slider   -->
    <referenceContainer name="ves-slideshow">
        <block class="Magento\Cms\Block\Block" name="banner-slider">
            <arguments>
                <argument name="block_id" xsi:type="string">banner-slider</argument>
            </arguments>
        </block>
    </referenceContainer>

Step 5: your theme 1 column layout looks like that:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-header" before="main.content"/>
        
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        
        <container name="ves-slideshow" as="ves-slideshow" label="Ves Slidehow" htmlTag="div" htmlClass="ves-slideshow page-main" before="main.content"/>

        <container name="ves-masstop1" as="ves-masstop1" label="Ves Masstop1" htmlTag="div" htmlClass="ves-masstop1 page-main" after="ves-slideshow"/>

        <container name="ves-massbottom" as="ves-massbottom" label="Ves MassBottom" htmlTag="div" htmlClass="ves-massbottom page-main" after="ves-masstop1"/>
        
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer" />
    </referenceContainer>
</layout>

Step 6: copy the requirejs-config.js form

• magento/module-theme/view/frontend/requirejs-config.js

And paste it in your theme folder

• app/design/frontend/Magento/mytheme/Magento_Theme/requirejs-config.js

And define the owlslider variable at the bottom like this:

"owlslider": "Magento_Theme/js/owl.carousel"

requirejs-config.js:

var config = {
    map: {
        "*": {
            "rowBuilder":             "Magento_Theme/js/row-builder",
            "toggleAdvanced":         "mage/toggle",
            "translateInline":        "mage/translate-inline",
            "sticky":                 "mage/sticky",
            "tabs":                   "mage/tabs",
            "zoom":                   "mage/zoom",
            "collapsible":            "mage/collapsible",
            "dropdownDialog":         "mage/dropdown",
            "dropdown":               "mage/dropdowns",
            "accordion":              "mage/accordion",
            "loader":                 "mage/loader",
            "tooltip":                "mage/tooltip",
            "deletableItem":          "mage/deletable-item",
            "itemTable":              "mage/item-table",
            "fieldsetControls":       "mage/fieldset-controls",
            "fieldsetResetControl":   "mage/fieldset-controls",
            "redirectUrl":            "mage/redirect-url",
            "loaderAjax":             "mage/loader",
            "menu":                   "mage/menu",
            "popupWindow":            "mage/popup-window",
            "validation":             "mage/validation/validation",
            "welcome":                "Magento_Theme/js/view/welcome",
            "owlslider":                "Magento_Theme/js/owl.carousel"
        }
    },
    paths: {
        "jquery/ui": "jquery/jquery-ui"
    },
    deps: [
        "jquery/jquery.mobile.custom",
        "js/responsive",
        "mage/common",
        "mage/dataPost",
        "js/theme",
        "mage/bootstrap"
    ]
};