دائري

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

كيف تعمل

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

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

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

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

مثال

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

تأكد من تعيين معرف فريد .carouselلعناصر التحكم الاختيارية ، خاصةً إذا كنت تستخدم العديد من الدوارات في صفحة واحدة.

الشرائح فقط

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

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

مع الضوابط

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

سابق التالي

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Third slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

سابق التالي

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

إستعمال

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

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

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

عبر JavaScript

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

$('.carousel').carousel()

خيارات

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

Methods

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "right").
• relatedTarget: عنصر DOM الذي يتم وضعه في مكانه كعنصر نشط.
• from: فهرس العنصر الحالي
• to: فهرس العنصر التالي

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

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