Kabaran tsa yanbu Bootstrap 5

Carousel / Slideshow

A carousel (slider) is a slideshow used to cycle through elements in a loop:

How to create a carousel

An example shows how to create a basic carousel with indicators and controls:

Example

<!-- 轮播 -->
<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>

Try It Yourself

Example Explanation

Description of the role of each class in the previous example:

Class Description
.carousel Create a carousel.
.carousel-indicators Add indicators to the carousel. They are the small dots at the bottom of each slide.
Represents how many slides are in the carousel and which slide the user is currently viewing.
.carousel-inner Add slides to the carousel.
.carousel-item Define the content of each slide.
.carousel-control-prev Add a left (previous) button to the carousel, allowing users to navigate backward between slides.
.carousel-control-next Add a right (next) button to the carousel, allowing users to navigate forward between slides.
.carousel-control-prev-icon Used with .carousel-control-prev to create a 'Previous' button.
.carousel-control-next-icon Used with .carousel-control-next to create a 'Next' button.
.slide Add CSS transitions and animation effects when sliding from one project to the next.
If you do not want this effect, please delete this class.

Add a title for the slide

Please add a title to each <div class="carousel-item"> inside <div class="carousel-caption"> Add elements within, create a title for each slide:

Example

<div class="carousel-item">
  <img src="beijing.jpg" alt="Beijing">
  <div class="carousel-caption">
    <h3>Beijing</h3>
    <p>Thank you, Beijing!</p>
  </div>
</div>

Try It Yourself