انتقال بين الصور بشكل تلقائي

يمكنك الاستعانة بمكتبة slick، بعد إضافة JQuery بشكل صحيح إلى مشروعك نضيف الوسوم التالية ضمن وسم head:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

بعدها نضيف الشيفرة التالية لجعل المكتبة تحول المحتوى إلى شرائح للعرض:

<script type="text/javascript">
  $(document).ready(function(){
    $('#wrapper').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
    });
  });
</script>

قد تحتاج لتنسيق الصور بحسب حجمها لتناسب حجم الشرائح

في حال لا ترغب باستخدام مكاتب إضافية، يمكنك استخدام التابع setInterval في جافاسكريبت والذي يقوم بالتنقّل بين الشرائح أو الصور خلال فترات زمنية معيّنة بشكل تلقائي:

مثال بسيط بفرض لديك الشرائح التالية:

<div class="carousel">
  <div class="carousel-item">
    <div class="red"></div>
  </div>
  <div class="carousel-item">
    <div class="green"></div>
  </div>
  <div class="carousel-item">
    <div class="yellow"></div>
  </div>
  <div class="carousel-item">
    <div class="violet"></div>
  </div>
</div>

التنسيق المبدئي للشرائح (يمكنك تغييرها أو استبدالها بصور حسب المطلوب):

* {
  box-sizing: border-box;
}
.carousel {
  position: relative;
  width: 400px;
  height: 270px;
  overflow: hidden;
  background-color: #cdcdcd;
}
.carousel .carousel-item {
  position: absolute;
  width: 100%;
  height: 270px;
  border: 1px solid #2e2e2e;
  top: 0;
  left: 100%;
}
.carousel .carousel-item.active {
  left: 0;
  transition: all 0.3s ease-out;
}
.carousel .carousel-item div {
  height: 100%;
}
.carousel .carousel-item .red {
  background-color: red;
}
.carousel .carousel-item .green {
  background-color: green;
}
.carousel .carousel-item .yellow {
  background-color: yellow;
}
.carousel .carousel-item .violet {
  background-color: violet;
}

وبعد ذلك يتم استدعاء شيفرة جافاسكريبت التالية للتنقّل بين الشرائح:

window.onload = function(){
  var slides = document.getElementsByClassName('carousel-item'),
      addActive = function(slide) {slide.classList.add('active')},
      removeActive = function(slide) {slide.classList.remove('active')};
  addActive(slides[0]);
  
  setInterval(function (){
    for (var i = 0; i < slides.length; i++){
      if (i + 1 == slides.length) {
        addActive(slides[0]);
        slides[0].style.zIndex = 100;
        setTimeout(removeActive, 350, slides[i]);
                                      
      if (slides[i].classList.contains('active')) { 
        slides[i].removeAttribute('style');
        setTimeout(removeActive, 350, slides[i]);
        addActive(slides[i + 1]);
        break;
      }
    } 
  }, 4000);
}
  

يمكنك التحكّم بزمن تأخير الانتقال بين الشرائح بتعديل القيمة 4000 الموجودة في التابع setInterval.

يمكنك القيام بذلك باستخدام مكتبة بوتستراب فهي الطريقة الأسهل والأكثر أستقرار بالطريقة التالية :

<div class="carousel slide" data-bs-ride="carousel">//هنا نضع المحددات من مكتبة بوتستراب ك صفوف
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">//السللايد الأول
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">//السلايد الثاني
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">// السلايد الثالث
    </div>
  </div>
  //هنا نضع أزرار التالي والسابق للتنقل بين السلايدات
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

قمنا في الاعلى بتحديد المدة الزمنية بالميلي ثانية لكل سلايد عند الخاصية :

data-bs-interval="10000"

أي ان الصورة الأولى ستظهر لمدة عشر ثواني ثم ستنتقل للصورة الثانية التي سوف تظهر لمدة ثانيتين وهكذا…

لكن  يجب عليك تضمين مكتبة البوتستراب لكي يعمل عندك الكود السابق, يمكنك إتباع التالي :

أولاً : يجب عليك وضع هذا الكود داخل تاغ ال <head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

ثانياً : ضع الكود التالي في نهاية تاغ ال <body>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>