How to add Slider in home page.

1. Create a block in magento 2 eg name ‘myslider‘ with codes as below

<p><img class="mySlides" style="width: 100%;" src="https://xyz.com/media/wysiwyg/narciso-feb21.jpg"> <img class="mySlides" style="width: 100%;" src="https://xyz.com/media/wysiwyg/fragrance_category_brandbanner_2476x850px_2.jpg"> <img class="mySlides" style="width: 100%;" src="https://xyz.com/media/wysiwyg/dolce-maj-2021lyko---2476x762-px_2.jpg"></p>

• 2 Create a phtml page in folder app/design/frontend/Vendor/yourtheme/Magento_Theme/templates/ like theslider.phtml with the following codes

<style>
.mySlides {display:none;}
</style>
<div class="slideshow-container">
<?php
echo $this->getLayout()
->createBlock('Magento\Cms\Block\Block')
->setBlockId('myslider')
->toHtml();
?>
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>

• 3 Call the block myslider in widget , which shall display on specific page , page as your homepage and container as AFTER PAGE HEADER TOP