<div class="slideshow-container">
 <style>
   .slideshow-container {
     max-width: 100%;
     position: relative;
     margin: auto;
   }
   .mySlides {
     display: none;
   }
   img {
     vertical-align: middle;
   }
   .fade {
     animation-name: fade;
     animation-duration: 1.5s;
   }
   @keyframes fade {
     from {opacity: .4}
     to {opacity: 1}
   }
 </style>
 <div class="mySlides fade">
   <img src="لینک-عکس-اول" style="width:100%">
 </div>
 <div class="mySlides fade">
   <img src="لینک-عکس-دوم" style="width:100%">
 </div>
 <div class="mySlides fade">
   <img src="لینک-عکس-سوم" style="width:100%">
 </div>
 <script>
   let slideIndex = 0;
   showSlides();
   function showSlides() {
     let i;
     let slides = document.getElementsByClassName("mySlides");
     for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
     }
     slideIndex++;
     if (slideIndex > slides.length) {slideIndex = 1}    
     slides[slideIndex-1].style.display = "block";  
     setTimeout(showSlides, 3000);
   }
 </script>
</div>