Bootstrap 5 Kayan

Hücum atmak / Slayt

Hücum atmak (Carousel), döngüsel olarak öğelerin göz atılmasını sağlar:

Hücum atmak nasıl yapılır

Aşağıda, gösterge ve kontrollerle temel bir carousel oluşturma yöntemi gösterilmiştir:

Örnek

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- İndikatörler/noktalar -->
  <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>
  <!-- Slayt/Carousel -->
  <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>
  <!-- Sol ve sol kontrollerleri/simgeleri -->
  <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>

Kişisel olarak deneyin

Örnek açıklaması

Örnekteki her sınıfın etkisini açıklayan tanım:

Sınıf Tanım
.carousel Panorama oluşturun.
.carousel-indicators Panoramaya göstergeler ekleyin. Bu, her slaytın altındaki küçük noktalardır.
Panoramada kaç slayt olduğunu ve kullanıcı şu anda hangi slaytı gördüğünü gösterir.
.carousel-inner Slaytı panoramaya ekleyin.
.carousel-item Her slaytın içeriğini belirler.
.carousel-control-prev Slaytlar arasında geri gitmek için sola (önceki) düğme ekleyin.
.carousel-control-next Slaytlar arasında ilerlemek için sağa (sonraki) düğme ekleyin.
.carousel-control-prev-icon .carousel-control-prev ile birlikte kullanıldığında, 'Önceki' düğmesini oluşturur.
.carousel-control-next-icon .carousel-control-next ile birlikte kullanıldığında, 'Sonraki' düğmesini oluşturur.
.slide Bir projeden bir sonraki projeye geçerken CSS geçiş ve animasyon efektleri ekleyin.
Bu tür bir etki istemiyorsanız, bu türü silin.

Slaytlara başlık eklemek için

Her birinde <div class="carousel-item"> içinde <div class="carousel-caption"> İçine bir element ekleyin, her slayt için bir başlık oluşturun:

Örnek

<div class="carousel-item">
  <img src="beijing.jpg" alt="Pekin">
  <div class="carousel-caption">
    <h3>Pekin</h3>
    <p>Teşekkürler, Pekin!</p>
  </div>
</div>

Kişisel olarak deneyin