Bootstrap 5 Carousel

โซนลูกเล่น / สไลด์

โซนลูกเล่น (รอบวงโคจร) คือสไลด์ที่ใช้เพื่อแสดงชิ้นงานในรูปแบบวงโคจร:

วิธีที่จะสร้างโซนลูกเล่น

ตัวอย่างด้านล่างนี้แสดงวิธีที่จะสร้างโซนลูกเล่นที่มีจุดนำทางและความควบคุม:

Mga halimbawa

<!-- รอบวงโคจร -->
<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>

Subukan nang personal

Halimbawa ng paliwanag

Ang paglalarawan ng ginagamit ng bawat klase sa halimbawang ito:

Klase Paglalarawan
.carousel Gumawa ng carousel.
.carousel-indicators Magdagdag ng mga tagapagpahiwatig sa carousel. Ito ay maliit na puntos sa ilalim ng bawat slide.
Naglalarawan kung ilang slide ang mayroon sa carousel at kung alin ang kasalukuyang pinag-aaralan ng gumagamit.
.carousel-inner Magdagdag ng slide sa carousel.
.carousel-item Tumutukoy sa nilalaman ng bawat slide.
.carousel-control-prev Magdagdag ng button na pataasin sa kaliwa (nakaraang) sa carousel, pinahihintulutan ang gumagamit na umikot sa pagitan ng mga slide.
.carousel-control-next Magdagdag ng button na pataasin sa kanan (susunod) sa carousel, pinahihintulutan ang gumagamit na lumipat sa pagitan ng mga slide.
.carousel-control-prev-icon Ginagamit kasama ang .carousel-control-prev, gumawa ng button na nakaraang.
.carousel-control-next-icon Ginagamit kasama ang .carousel-control-next, gumawa ng button na susunod.
.slide Magdagdag ng CSS transition at animation effect kapag magsislip mula sa isang proyekto sa susunod na proyekto.
Kung hindi mo gusto ang ganitong epekto, alisin ang ganitong klase.

Magdagdag ng pamagat sa slide

Mangyaring ilagay ang pamagat sa bawat <div class="carousel-item"> loob ng <div class="carousel-caption"> Magdagdag ng mga elemento sa loob ng, gumawa ng pamagat para sa bawat isang slide:

Mga halimbawa

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

Subukan nang personal