العرض التفاعلي (Carousel)

مكون عرض شرائح للتنقل بين العناصر — الصور أو شرائح النصوص — مثل الـ carousel.

في هذه الصفحة

كيف يعمل ؟

الـ carousel هو عرض شرائح للتنقل عبر سلسلة من المحتويات، تم بناؤه باستخدام تحويلات CSS 3D وقليل من الـ JavaScript. وهو يعمل مع سلسلة من الصور، أو النصوص، أو علامات التنسيق المخصصة. كما يتضمن دعماً لعناصر التحكم في السابق/التالي والمؤشرات.
لأسباب تتعلق بالأداء، يجب تهيئة الـ carousels يدوياً باستخدام carousel constructor method. وبدون التهيئة، فإن بعض مستمعي الأحداث (تحديداً الأحداث المطلوبة لدعم اللمس/السحب) لن يتم تسجيلها حتى يقوم المستخدم بتنشيط عنصر تحكم أو مؤشر بشكل صريح.

الاستثناء الوحيد هو autoplaying carousels التي تحتوي على السمة data-bs-ride="carousel" حيث يتم تهيئتها تلقائياً عند تحميل الصفحة. إذا كنت تستخدم الـ autoplaying carousels مع سمة البيانات، فلا تقم بتهيئة نفس الـ carousels صراحةً باستخدام الـ constructor method.
الـ carousels المتداخلة غير مدعومة. يجب أن تكون على دراية أيضاً بأن الـ carousels بشكل عام يمكن أن تسبب غالباً تحديات في سهولة الاستخدام وإمكانية الوصول.

تعتمد تأثيرات الرسوم المتحركة لهذا المكوّن على استعلام الوسائط (media query) الخاص بـ prefers-reduced-motion. راجع قسم تقليل الحركة في مستندات إمكانية الوصول لدينا.

مثال أساسي

إليك مثال أساسي على الـ carousel يحتوي على ثلاث شرائح. لاحظ عناصر التحكم في السابق/التالي. نوصي باستخدام عناصر <button>، ولكن يمكنك أيضاً استخدام عناصر <a> مع role="button".

html

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

لا تقوم الـ carousels بتوحيد أبعاد الشرائح تلقائياً. وبناءً على ذلك، قد تحتاج إلى استخدام أدوات مساعدة إضافية أو أنماط مخصصة لتحديد حجم المحتوى بشكل مناسب. وبينما تدعم الـ carousels عناصر التحكم في السابق/التالي والمؤشرات، إلا أنها ليست مطلوبة بشكل صريح. قم بإضافتها وتخصيصها كما تراه مناسباً.

يجب إضافة الفئة .active إلى إحدى الشرائح، وإلا فلن يكون الـ carousel مرئياً. تأكد أيضاً من تعيين id فريد على الـ .carousel لعناصر التحكم الاختيارية، خاصة إذا كنت تستخدم عدة carousels في صفحة واحدة. يجب أن تحتوي عناصر التحكم والمؤشرات على سمة data-bs-target (أو href للروابط) تطابق الـ id الخاص بعنصر الـ .carousel.

المؤشرات (Indicators)

يمكنك إضافة مؤشرات إلى الـ carousel، جنباً إلى جنب مع عناصر التحكم في السابق/التالي. تتيح المؤشرات للمستخدمين الانتقال مباشرة إلى شريحة معينة.

html

<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

التسميات التوضيحية (Captions)

يمكنك إضافة تسميات توضيحية إلى الشرائح الخاصة بك باستخدام عنصر .carousel-caption داخل أي .carousel-item. يمكن إخفاؤها بسهولة في منافذ العرض الأصغر، كما هو موضح أدناه، باستخدام أدوات العرض المساعدة الاختيارية. نقوم بإخفائها في البداية باستخدام .d-none ونعيد إظهارها في الأجهزة متوسطة الحجم باستخدام .d-md-block.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

html

<div id="carouselExampleCaptions" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

التلاشي المتقاطع (Crossfade)

أضف .carousel-fade إلى الـ carousel الخاص بك لتحريك الشرائح باستخدام انتقال التلاشي بدلاً من الانزلاق. اعتماداً على محتوى الـ carousel (على سبيل المثال، الشرائح التي تحتوي على نصوص فقط)، قد ترغب في إضافة .bg-body أو بعض أنماط CSS مخصصة إلى الـ .carousel-items لضمان تلاشٍ متقاطع صحيح.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

الـ Autoplaying carousels

يمكنك جعل الـ carousels الخاصة بك تعمل تلقائياً عند تحميل الصفحة عن طريق تعيين خيار ride إلى carousel. الـ Autoplaying carousels تتوقف تلقائياً عند تمرير الماوس فوقها. يمكن التحكم في هذا السلوك باستخدام خيار pause. في المتصفحات التي تدعم Page Visibility API، سيتوقف الـ carousel عن التدوير عندما لا تكون صفحة الويب مرئية للمستخدم (على سبيل المثال، عندما يكون تبويب المتصفح غير نشط، أو عندما يتم تصغير نافذة المتصفح).

لأسباب تتعلق بإمكانية الوصول، نوصي بتجنب استخدام الـ autoplaying carousels. إذا كانت صفحتك تتضمن autoplaying carousel، فنحن نوصي بتوفير زر أو عنصر تحكم إضافي لإيقاف الـ carousel بشكل صريح.

راجع WCAG 2.2 Success Criterion 2.2.2 Pause, Stop, Hide.

html

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

عندما يتم تعيين خيار ride إلى true، بدلاً من carousel، لن يبدأ الـ carousel في التدوير تلقائياً عند تحميل الصفحة. بدلاً من ذلك، سيبدأ فقط بعد أول تفاعل من المستخدم.

html

<div id="carouselExampleRide" class="carousel slide" data-bs-ride="true">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

الفاصل الزمني لكل `carousel-item.` بشكل منفرد

أضف data-bs-interval="" إلى .carousel-item لتغيير مقدار الوقت الفاصل بين التدوير التلقائي للعنصر التالي.

html

<div id="carouselExampleInterval" 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">
      <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>
    <span class="visually-hidden">Previous</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>
    <span class="visually-hidden">Next</span>
  </button>
</div>

الـ Autoplaying carousels بدون عناصر تحكم

إليك carousel يحتوي على شرائح فقط. لاحظ وجود .d-block و .w-100 على صور الـ carousel لمنع محاذاة الصور الافتراضية في المتصفح.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

تعطيل السحب باللمس (Disable touch swiping)

تدعم الـ carousels السحب يسار/يمين على الأجهزة التي تعمل باللمس للتنقل بين الشرائح. يمكن تعطيل ذلك عن طريق تعيين خيار touch إلى false.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

النسخة الداكنة

v5.3.0 مستبعد في الإصدار

أضف .carousel-dark إلى الـ .carousel للحصول على عناصر تحكم ومؤشرات وتسميات توضيحية أكثر دكنة. يتم عكس عناصر التحكم مقارنة بتعبئتها البيضاء الافتراضية باستخدام خاصية filter في الـ CSS. تمتلك التسميات التوضيحية وعناصر التحكم متغيرات Sass إضافية لتخصيص الـ color والـ background-color.

تنبيه! تم استبعاد المتغيرات الداكنة للمكونات في الإصدار v5.3.0 مع تقديم أوضاع الألوان. بدلاً من إضافة carousel-dark.، قم بتعيين "data-bs-theme="dark على العنصر الجذر، أو غلاف أب، أو المكون نفسه.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

انتقال مخصص

يمكن تغيير مدة الانتقال لـ .carousel-item باستخدام متغير Sass $carousel-transition-duration قبل التجميع أو عبر أنماط مخصصة إذا كنت تستخدم الـ CSS المجمّع. في حال تطبيق انتقالات متعددة، تأكد من تعريف انتقال التحويل (transform) أولاً (على سبيل المثال: transition: transform 2s ease, opacity .5s ease-out).

الـ (CSS)

متغيرات الـ (Sass)

متغيرات لجميع الـ carousels:

scss/_variables.scss

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;
$carousel-control-icon-filter:       null;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

متغيرات للـ carousel الداكن:

scss/_variables.scss

$carousel-dark-indicator-active-bg:  $black; // Deprecated in v5.3.4
$carousel-dark-caption-color:        $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter:  invert(1) grayscale(100); // Deprecated in v5.3.4

الإستخدام

عبر سمات البيانات (Via data attributes)

استخدم سمات البيانات للتحكم بسهولة في موضع الـ carousel. تقبل السمة data-bs-slide الكلمات المفتاحية prev أو next، والتي تغير موضع الشريحة بالنسبة لموضعها الحالي. بدلاً من ذلك، استخدم data-bs-slide-to لتمرير فهرس شريحة خام إلى الـ carousel مثل data-bs-slide-to="2"، مما ينقل موضع الشريحة إلى فهرس معين يبدأ من 0.

عبر الـ (JavaScript)

قم باستدعاء الـ carousel يدوياً باستخدام:

const carousel = new bootstrap.Carousel('#myCarousel')

خيارات

بما أنه يمكن تمرير الخيارات عبر سمات البيانات (data attributes) أو الـ JavaScript، يمكنك إضافة اسم الخيار إلى -data-bs ، كما في "data-bs-animation="{value}. تأكد من تغيير نوع حالة اسم الخيار من “camelCase” إلى “kebab-case” عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال، استخدم "data-bs-custom-class="beautifier بدلاً من "data-bs-customClass="beautifier.

بدءاً من Bootstrap 5.2.0، تدعم جميع المكونات سمة بيانات محجوزة تجريبية وهي data-bs-config والتي يمكن أن تحتوي على تكوين بسيط للمكون كسلسلة JSON. عندما يحتوي العنصر على سمات 'data-bs-config='{"delay":0, "title":123} و "data-bs-title="456، ستكون قيمة title النهائية هي 456 وستقوم سمات البيانات المنفصلة بتجاوز القيم المعطاة في data-bs-config. بالإضافة إلى ذلك، يمكن لسمات البيانات الموجودة أن تحتوي على قيم JSON مثل 'data-bs-delay='{"show":0,"hide":150}.

كائن التكوين النهائي هو النتيجة المدمجة لـ data-bs-config و -data-bs و js object حيث يقوم آخر مفتاح-قيمة مُعطى بتجاوز القيم الأخرى.

الاسم	النوع	الإفتراضي	الوصف
`interval`	number	`5000`	مقدار الوقت الفاصل بين التدوير التلقائي للعنصر.
`keyboard`	boolean	`true`	ما إذا كان يجب على الـ carousel التفاعل مع أحداث لوحة المفاتيح.
`pause`	string, boolean	`"hover"`	إذا تم تعيينه إلى `"hover"`، يتم إيقاف تدوير الـ carousel عند `mouseenter` واستئناف التدوير عند `mouseleave`. إذا تم تعيينه إلى `false`، فإن تمرير الماوس فوق الـ carousel لن يؤدي إلى إيقافه. في الأجهزة التي تدعم اللمس، عند تعيينه إلى `"hover"`، سيتوقف التدوير عند `touchend` (بمجرد انتهاء المستخدم من التفاعل مع الـ carousel) لمدة فترتين زمنيتين، قبل الاستئناف تلقائياً. وهذا بالإضافة إلى سلوك الماوس.
`ride`	string, boolean	`false`	إذا تم تعيينه إلى `true`، يتم تشغيل الـ carousel تلقائياً بعد أن يقوم المستخدم بتدوير العنصر الأول يدوياً. إذا تم تعيينه إلى `"carousel"`، يتم تشغيل الـ carousel تلقائياً عند التحميل.
`touch`	boolean	`true`	ما إذا كان يجب أن يدعم الـ carousel تفاعلات السحب يسار/يمين على الأجهزة التي تعمل باللمس.
`wrap`	boolean	`true`	ما إذا كان يجب أن يدور الـ carousel بشكل مستمر أو يتوقف عند النهايات.

الطرق، الأساليب (Methods)

جميع دوال الـ API هي دوال غير متزامنة (asynchronous) وتبدأ عملية انتقال (transition). وهي تعود إلى المستدعي بمجرد بدء عملية الانتقال، ولكن قبل انتهائها. بالإضافة إلى ذلك، سيتم تجاهل أي استدعاء للدالة على مكوّن يمر حالياً بعملية انتقال. تعرف على المزيد في مستندات JavaScript الخاصة بنا.

يمكنك إنشاء نسخة من الـ carousel باستخدام الـ carousel constructor، وتمرير أي خيارات إضافية. على سبيل المثال، لتهيئة carousel يعمل تلقائياً يدوياً (بافتراض أنك لا تستخدم سمة data-bs-ride="carousel" في التنسيق نفسه) مع فاصل زمني محدد ومع تعطيل دعم اللمس، يمكنك استخدام:

const myCarouselElement = document.querySelector('#myCarousel')

const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  touch: false
})

الأسلوب	الوصف
`cycle`	يبدأ التدوير عبر عناصر الـ carousel من اليسار إلى اليمين.
`dispose`	يدمر الـ carousel الخاص بالعنصر. (يزيل البيانات المخزنة في عنصر الـ DOM)
`getInstance`	طريقة ثابتة (Static method) تتيح لك الحصول على نسخة الـ carousel المرتبطة بعنصر DOM. يمكنك استخدامها بهذا الشكل: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	طريقة ثابتة (Static method) تعيد نسخة الـ carousel المرتبطة بعنصر DOM، أو تنشئ نسخة جديدة في حال لم يتم تهيئتها. يمكنك استخدامها بهذا الشكل: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	ينتقل إلى العنصر التالي. يعود إلى المستدعي قبل عرض العنصر التالي (على سبيل المثال، قبل وقوع حدث `slid.bs.carousel`).
`nextWhenVisible`	لا يقوم بتدوير الـ carousel إلى التالي عندما لا تكون الصفحة، أو الـ carousel، أو العنصر الأب للـ carousel مرئياً. يعود إلى المستدعي قبل عرض العنصر المستهدف.
`pause`	يوقف الـ carousel عن التدوير عبر العناصر.
`prev`	ينتقل إلى العنصر السابق. يعود إلى المستدعي قبل عرض العنصر السابق (على سبيل المثال، قبل وقوع حدث `slid.bs.carousel`).
`to`	ينقل الـ carousel إلى إطار محدد (يبدأ من 0، مشابه للمصفوفة). يعود إلى المستدعي قبل عرض العنصر المستهدف (على سبيل المثال، قبل وقوع حدث `slid.bs.carousel`).

الأحداث (Events)

تُظهر الفئة (class) الخاصة بالـ carousel في Bootstrap حدثين لربط الوظائف الخاصة بالـ carousel. يمتلك كلا الحدثين الخصائص الإضافية التالية:

direction: الاتجاه الذي ينزلق فيه الـ carousel (إما "left" أو "right").
relatedTarget: عنصر الـ DOM الذي يتم سحبه إلى مكانه كعنصر نشط.
from: فهرس العنصر الحالي.
to: فهرس العنصر التالي.

يتم إطلاق جميع أحداث الـ carousel على الـ carousel نفسه (أي على <div class="carousel">).

نوع الحدث	الوصف
`slid.bs.carousel`	يتم إطلاقه عندما يكمل الـ carousel انتقال الشريحة الخاص به.
`slide.bs.carousel`	يتم إطلاقه فوراً عند استدعاء طريقة النسخة `slide`.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

العرض التفاعلي (Carousel)

كيف يعمل ؟

مثال أساسي

المؤشرات (Indicators)

التسميات التوضيحية (Captions)

First slide label

Second slide label

Third slide label

التلاشي المتقاطع (Crossfade)

الـ Autoplaying carousels

الفاصل الزمني لكل carousel-item. بشكل منفرد

الـ Autoplaying carousels بدون عناصر تحكم

تعطيل السحب باللمس (Disable touch swiping)

النسخة الداكنة

First slide label

Second slide label

Third slide label

انتقال مخصص

الـ (CSS)

متغيرات الـ (Sass)

الإستخدام

عبر سمات البيانات (Via data attributes)

عبر الـ (JavaScript)

خيارات

الطرق، الأساليب (Methods)

الأحداث (Events)

الفاصل الزمني لكل `carousel-item.` بشكل منفرد