شتاب‌دهنده‌های 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 یک پروجیکٹ سے دوسرے پروجیکٹ کی جانب کی نقل کے دوران سی ایس ایس ترجیح اور انیمیشن کا استعمال کریں۔
اگر آپ اس اثر کو نہیں چاہتے تو اس کو میٹرک کریں۔

اسلاید کی عنوان بھیجیں

کوشش کریں تاکہ کسی <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>

خود کا تجربہ کریں