كيفية صننع سلايد شو متحرك js

دعنا نأخذ مثال عن طريقة عمل ذلك بالبداية ننشأ كود ال html

 <div class="slideshow-container">
        <div class="mySlides fade moveRight">
          <img src="slide1.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
          <img src="slide2.jpg" style="width:100%">
        </div>
        <div class="mySlides fade">
          <img src="slide3.jpg" style="width:100%">
        </div>
      </div>

يمكنك تغيير اسم الصورة حسب اسم الصورة الموجودة لديك

والان دعني اكتب لك كود ال css وساعطيك تعليقات امام الكود تشرح لك كل كود ماهي وظيفته

/* تعريف تسلسل الحركة */
@keyframes fade {
    0% {
      opacity: 0; /* الصورة شفافة في البداية */
      transform: translateX(-100%); /* تحريك الصورة يسارًا خارج الشاشة */
    }
    25% {
      opacity: 1; /* الصورة تظهر بالكامل بعد ربع المدة */
      transform: translateX(0); /* الصورة في مكانها الطبيعي */
    }
    75% {
      opacity: 1; /* الصورة مرئية دون تغيير */
      transform: translateX(0); /* الصورة في مكانها الطبيعي */
    }
    100% {
      opacity: 0; /* الصورة تصبح شفافة بشكل تدريجي */
      transform: translateX(100%); /* تحريك الصورة يمينًا خارج الشاشة */
    }
  }
  
  /* تحديد خصائص العرض والارتفاع للسلايد شو */
  .slideshow-container {
    position: relative;
    width: 100%;
    height: 600px; /* هنا تقوم بتحديد الارتفاع الذي تريده للسلايد شو */
    overflow: hidden;
  }
  
  /* تعيين خصائص الصورة والتأثير عليها */
  .mySlides {
    position: absolute; /* تحديد مكان الصورة بالنسبة للعنصر الأب */
    width: 100%;
    height: 100%;
    opacity: 0; /* الصورة شفافة في البداية */
  }
  
  /* تحديد تأثير التحرك والظهور لكل صورة */
  .mySlides:nth-child(1) {
    animation: fade 9s 0s infinite; /* تأثير الحركة للصورة الأولى */
  }
  .mySlides:nth-child(2) {
    animation: fade 9s 3s infinite; /* تأثير الحركة للصورة الثانية بعد 3 ثواني */
  }
  .mySlides:nth-child(3) {
    animation: fade 9s 6s infinite; /* تأثير الحركة للصورة الثالثة بعد 6 ثواني */
  }

  الان اصبح لديك سلايد شو متحرك كما تريد بامكانك التغيير داخل خصائص ال css حسب رغبتك ك ارتفاع الصور ومدة تحريكها والطريقة

وبالتوفيق لك ...