دائري

مكون عرض الشرائح للتنقل بين العناصر - الصور أو شرائح النص - مثل الرف الدائري.

كيف تعمل

العرض الدائري عبارة عن عرض شرائح للتنقل عبر سلسلة من المحتوى ، تم إنشاؤه باستخدام تحويلات CSS ثلاثية الأبعاد وقليلًا من JavaScript. إنه يعمل مع سلسلة من الصور أو النصوص أو العلامات المخصصة. كما يتضمن دعمًا للضوابط والمؤشرات السابقة / التالية.

في المتصفحات حيث يتم دعم واجهة برمجة تطبيقات Page Visibility ، ستتجنب المكتبة الانزلاق عندما تكون صفحة الويب غير مرئية للمستخدم (على سبيل المثال عندما تكون علامة تبويب المتصفح غير نشطة ، يتم تصغير نافذة المتصفح ، وما إلى ذلك).

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

يُرجى العلم بأن الدوارات المتداخلة غير مدعومة وأن الدوارات غير متوافقة بشكل عام مع معايير إمكانية الوصول.

أخيرًا ، إذا كنت تقوم ببناء JavaScript من المصدر ، فهذا يتطلبutil.js .

مثال

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

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

الشرائح فقط

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>

مع الضوابط

إضافة في الضوابط السابقة والتالية:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

مع المؤشرات

يمكنك أيضًا إضافة المؤشرات إلى الرف الدائري جنبًا إلى جنب مع عناصر التحكم أيضًا.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

مع تعليق

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

تسمية الشريحة الأولى

Nulla vitae elit libero ، pharetra augue mollis interdum.

تسمية الشريحة الثانية

Lorem ipsum dolor sit amet، consectetur adipiscing elit.

تسمية الشريحة الثالثة

عرض السلع الرئيسية ، ورسالة نيزل صغيرة.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

تبهت

أضف .carousel-fadeإلى دائرتك لتحريك الشرائح مع انتقال خفوت بدلاً من شريحة.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

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

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

إستعمال

عبر سمات البيانات

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

تُستخدم data-ride="carousel"السمة لوضع علامة على الرف الدائري باعتباره متحركًا بدءًا من تحميل الصفحة. لا يمكن استخدامه مع (مكرر وغير ضروري) تهيئة JavaScript صريحة لنفس المكتبة.

عبر JavaScript

الاتصال الدائري يدويًا باستخدام:

$('.carousel').carousel()

خيارات

يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-interval="".

اسم	يكتب	تقصير	وصف
فترة	رقم	5000	مقدار الوقت الذي يستغرقه التأخير بين تدوير عنصر تلقائيًا. إذا كانت القيمة خاطئة ، فلن تدور دائرة الرف الدائري تلقائيًا.
لوحة المفاتيح	قيمة منطقية	حقيقي	ما إذا كان يجب أن يتفاعل الرف الدائري مع أحداث لوحة المفاتيح أم لا.
وقفة	سلسلة \| قيمة منطقية	"يحوم"	في حالة الضبط على `"hover"`، يتم إيقاف تشغيل دائرة العرض مؤقتًا واستئناف `mouseenter`تشغيلها `mouseleave`. إذا تم `false`الضبط على ، فلن يؤدي التمرير فوق الرف الدائري إلى إيقافه مؤقتًا. على الأجهزة التي تعمل باللمس ، عند الضبط على `"hover"`، سيتوقف ركوب الدراجات مؤقتًا `touchend`(بمجرد انتهاء المستخدم من التفاعل مع الرف الدائري) لفترتين ، قبل استئنافه تلقائيًا. لاحظ أن هذا بالإضافة إلى سلوك الماوس أعلاه.
اركب	سلسلة	خاطئة	يتم التشغيل التلقائي للعرض الدائري بعد أن يقوم المستخدم بتدوير العنصر الأول يدويًا. في حالة "الرف الدائري" ، يتم التشغيل التلقائي للعرض الدائري عند التحميل.
طَوّق	قيمة منطقية	حقيقي	ما إذا كان يجب أن يدور الرف الدائري بشكل مستمر أو يتوقف بشدة.
يلمس	قيمة منطقية	حقيقي	ما إذا كان يجب أن يدعم الرف الدائري تفاعلات التمرير لليسار / لليمين على أجهزة الشاشات التي تعمل باللمس.

طُرق

الطرق غير المتزامنة والانتقالات

جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .

راجع وثائق JavaScript الخاصة بنا للحصول على مزيد من المعلومات .

`.carousel(options)`

يقوم بتهيئة الرف الدائري بخيارات اختيارية objectويبدأ التنقل بين العناصر.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

يتنقل عبر عناصر الدائرة من اليسار إلى اليمين.

`.carousel('pause')`

يوقف الدائرة من ركوب الدراجات بين العناصر.

`.carousel(number)`

يقوم بتدوير الرف الدائري إلى إطار معين (يستند إلى 0 ، على غرار المصفوفة). يعود إلى المتصل قبل عرض العنصر الهدف (أي قبل slid.bs.carouselوقوع الحدث).

`.carousel('prev')`

دورات إلى العنصر السابق. يعود إلى المتصل قبل عرض العنصر السابق (أي قبل slid.bs.carouselوقوع الحدث).

`.carousel('next')`

دورات إلى العنصر التالي. يعود إلى المتصل قبل عرض العنصر التالي (أي قبل slid.bs.carouselوقوع الحدث).

`.carousel('dispose')`

يدمر دائرة العنصر.

الأحداث

يعرض الفصل الدائري في Bootstrap حدثين للتثبيت في وظيفة الرف الدائري. كلا الحدثين لهما الخصائص الإضافية التالية:

direction: الاتجاه الذي تتحرك فيه دائرة الصور (إما "left"أو "right").
relatedTarget: عنصر DOM الذي يتم وضعه في مكانه كعنصر نشط.
from: فهرس العنصر الحالي
to: فهرس العنصر التالي

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

نوع الحدث	وصف
منزلق. bs. كاروسيل	يتم تشغيل هذا الحدث فورًا عند `slide`استدعاء طريقة المثيل.
slid.bs. كاروسيل	يتم تشغيل هذا الحدث عندما يكمل العرض الدائري انتقال الشريحة الخاص به.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

تغيير مدة الانتقال

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