Bootstrap Carousel (Slayt Gösterisi)

Bootstrap Carousel, web sitenizde görseller veya içerikleri slayt gösterisi olarak sunmanıza olanak tanıyan bir bileşendir. Duyarlı ve özelleştirilebilir yapısıyla, web sitenize dinamik bir görünüm kazandırır. Carousel bileşeni, otomatik oynatma, manuel gezinme, geçiş efektleri gibi özellikler sunar.

Temel Kullanım

Bootstrap Carousel oluşturmak için .carousel sınıfı kullanılır. Bu yapı içerisinde slaytları tanımlamak için .carousel-item sınıfı kullanılır.

Temel Örnek:

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İlk Slayt">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İkinci Slayt">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Üçüncü Slayt">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Önceki</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Sonraki</span>
  </button>
</div>

Carousel Çalışma Mantığı

  • Container Yapısı: .carousel sınıfı slayt gösterisini tanımlar.
  • Slaytlar: Her slayt .carousel-item sınıfıyla temsil edilir.
  • Aktif Slayt: İlk slayt active sınıfına sahip olmalıdır.
  • Geçiş Kontrolleri: .carousel-control-prev ve .carousel-control-next sınıfları, önceki ve sonraki slaytlar arasında gezinmeyi sağlar.

Düğmeler ve Göstergeler

Carousel bileşenine gezinme düğmeleri ve göstergeler eklenebilir.

Göstergeler Örneği:

<div id="carouselWithIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slayt 1"></button>
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="1" aria-label="Slayt 2"></button>
    <button type="button" data-bs-target="#carouselWithIndicators" data-bs-slide-to="2" aria-label="Slayt 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İlk Slayt">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İkinci Slayt">
    </div>
    <div class="carousel-item">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Üçüncü Slayt">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Önceki</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselWithIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Sonraki</span>
  </button>
</div>

Otomatik Oynatma ve Geçiş Süresi

  • Otomatik Oynatma: data-bs-ride="carousel" ile sağlanır.
  • Geçiş Süresi: Slaytlar arasında geçiş süresini ayarlamak için data-bs-interval özelliği kullanılır.

Örnek:

<div id="carouselWithInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="2000">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İlk Slayt">
    </div>
    <div class="carousel-item" data-bs-interval="3000">
      <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İkinci Slayt">
    </div>
  </div>
</div>

Başlık ve Açıklamalar

Her slayta başlık ve açıklama eklemek için .carousel-caption sınıfı kullanılır.

Örnek:

<div class="carousel-item active">
  <img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="İlk Slayt">
  <div class="carousel-caption d-none d-md-block">
    <h5>Başlık 1</h5>
    <p>Bu, ilk slaytın açıklamasıdır.</p>
  </div>
</div>

Duyarlı Tasarım

Bootstrap Carousel bileşeni mobil uyumlu olarak tasarlanmıştır. Görseller .img-fluid sınıfıyla daha iyi ölçeklendirilir.

Örnek:

<img src="https://via.placeholder.com/800x400" class="img-fluid" alt="Responsive Resim">
SONRAKİ DERS

Leave a Reply

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir