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ı:
.carouselsınıfı slayt gösterisini tanımlar. - Slaytlar: Her slayt
.carousel-itemsınıfıyla temsil edilir. - Aktif Slayt: İlk slayt
activesınıfına sahip olmalıdır. - Geçiş Kontrolleri:
.carousel-control-prevve.carousel-control-nextsı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">
