الشريط العرضي Bootstrap 5

العرض المتحرك / الشريط العرضي

العرض المتحرك (الشريط العرضي) هو عرض用于 عرض العناصر بشكل متكرر:

كيفية إنشاء العرض المتحرك

هذا المثال يوضح كيفية إنشاء عرض أساسي يحتوي على مؤشرات والتحكمات:

مثال

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- 指标/点 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- 幻灯片/轮播 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- 左右控件/图标 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

جربها بنفسك

توضيح المثال

وصف تأثير كل نوع في المثال السابق:

النوع الوصف
.carousel إنشاء العبرة.
.carousel-indicators إضافة مؤشرات إلى العبرة. إنها النقاط الصغيرة في قاعدة كل شريحة.
يُمثل عدد الشريحات في العبرة، وما هي الشريحة التي يُظهرها المستخدم حاليًا.
.carousel-inner إضافة الشريحة إلى العبرة.
.carousel-item تحديد محتوى كل شريحة.
.carousel-control-prev إضافة زر إلى يسار (السابق) للعبرة، مما يسمح للمستخدم بالتراجع بين الشريحات.
.carousel-control-next إضافة زر إلى يمين (التالي) للعبرة، مما يسمح للمستخدم بالتقدم بين الشريحات.
.carousel-control-prev-icon استخدمها مع .carousel-control-prev لإنشاء زر 'السابق'.
.carousel-control-next-icon استخدمها مع .carousel-control-next لإنشاء زر 'التالي'.
.slide إضافة تأثير انتقال CSS ورسوم متحركة عند التمرير من مشروع إلى آخر.
إذا لم تكن ترغب في هذا التأثير، فحذف هذا النوع.

إضافة عنوان إلى الشريحة

يرجى إضافة عنوان إلى كل <div class="carousel-item"> داخل <div class="carousel-caption"> إضافة عنصر إلى داخل، أنشئ عنوانًا لكل شريحة:

مثال

<div class="carousel-item">
  <img src="beijing.jpg" alt="بكين">
  <div class="carousel-caption">
    <h3>بكين</h3>
    <p>شكراً، بكين!</p>
  </div>
</div>

جربها بنفسك