اسلایدشو (Carousel)

«اسلایدشو بوت استرپ» یک نمایش اسلاید چرخشی است. «کامپوننت (Component)» یعنی بخش آماده رابط. این اسلایدشو بین اسلایدها جابه جا می شود. مثل نمایش عکس های سفر در گوشی، اما منظم تر و خودکارتر.

ساخت اسلایدشو پایه

برای شروع، ظرف با کلاس های .carousel و .slide بساز. سپس «ایندیکاتور (Indicator)» یعنی دکمه های نقطه ای اضافه کن. بعد داخل .carousel-inner چند .carousel-item بگذار.

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/dots -->
  <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>
  <!-- Slides -->
  <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>
  <!-- Controls -->
  <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-inner ظرف اسلایدها است. .carousel-item محتوای هر اسلاید است. .carousel-indicators نقطه ها را می سازد. دکمه های قبلی/بعدی با .carousel-control-* جابه جا می کنند. .slide انیمیشن گذر می دهد.

افزودن کپشن (Caption)

برای متن روی اسلاید، از .carousel-caption داخل هر .carousel-item استفاده کن. مانند زیر:

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>

مشاهده در ادیتور

گام های عملی سریع

1. یک ظرف با id بساز و کلاس های .carousel و .slide بده.
2. نقطه ها را با .carousel-indicators و دکمه ها را با کنترل ها بساز.
3. داخل .carousel-inner چند .carousel-item قرار بده.
4. برای کپشن، از .carousel-caption داخل هر اسلاید استفاده کن.
5. تصاویر را تمام عرض با .d-block و .w-100 نمایش بده.

نکته: مقدار data-bs-target دکمه ها باید با id اسلایدشو یکی باشد.

جمع بندی سریع

• اسلایدشو بوت استرپ ساده و واکنش گرا است.
• اسلایدها در .carousel-inner قرار می گیرند.
• نقطه ها و دکمه ها پیمایش را راحت می کنند.
• کپشن ها متن روی تصویر می آورند.
• همیشه آدرس هدف دکمه ها را بررسی کن.

صفحه های مرتبط: نوار ناوبری (Navbar)، مودال (Modal). همچنین اسلایدشو بوت استرپ مرجع همین صفحه است.