Bootstrap'ta Carousel, kullanıcıların içeriklerini slaytlar halinde göstererek dinamik bir görsel deneyim sunan bir bileşendir. Genellikle resim galerileri, haber güncellemeleri veya içerik vurgulama için kullanılır. Carousel bileşeni, otomatik olarak dönen slaytlar, kullanıcı etkileşimleriyle manuel geçiş yapma olanağı ve daha fazlasını içerir.
1. Temel Carousel Yapısı
Carousel bileşeninin temel yapısı, carousel sınıfı ile başlar. Her bir slayt, carousel-item sınıfı ile tanımlanır. Aşağıda basit bir örnek verilmiştir:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Carousel Örneği</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>
<body>
<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="Slayt 1">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 1</h5>
<p>Bu, birinci slaytın açıklamasıdır.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slayt 2">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 2</h5>
<p>Bu, ikinci slaytın açıklamasıdır.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slayt 3">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 3</h5>
<p>Bu, üçüncü slaytın açıklamasıdır.</p>
</div>
</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>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js">
</script>
</body>
</html>
2. Carousel Bileşeninin Bileşenleri
-
carousel: Carousel bileşeninin ana konteyneri.data-bs-rideözelliği ile otomatik geçişi kontrol edebilirsiniz. -
carousel-inner: Tüm slaytların bulunduğu kapsayıcı. -
carousel-item: Her bir slayt için kullanılan sınıf. İlk slayt içinactivesınıfı eklenmelidir. -
carousel-caption: Slaytların üzerine yerleştirilecek başlık ve açıklama metni. -
Kontrol Butonları: Önceki (
carousel-control-prev) ve sonraki (carousel-control-next) slaytlara geçiş için butonlar.
3. Özelleştirme Seçenekleri
Görsel Ekleme
Görselleri kullanırken, her slayt için görsel boyutunu ayarlamak için Bootstrap sınıflarını (img-fluid, w-100, vb.) kullanabilirsiniz.
Otomatik Geçiş
data-bs-ride="carousel" kullanarak otomatik geçiş özelliğini etkinleştirebilirsiniz. Eğer otomatik geçiş istemiyorsanız, bu özelliği kaldırabilirsiniz.
Geçiş Süresi
Carousel geçiş sürelerini özelleştirmek için JavaScript ile özelleştirme yapabilirsiniz. Örneğin:
$('.carousel').carousel({
interval: 3000 // 3 saniyede bir geçiş
});
4. Ekstra Özellikler
Kılavuz Noktaları
Kılavuz noktaları, slaytların altında, kullanıcının hangi slaytta olduğunu gösterir. Bunu eklemek için carousel-indicators sınıfını kullanabilirsiniz:
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active">
</li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1">
</li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2">
</li>
</ol>
5. Örnek: Carousel Kullanımı
Tam bir örnek ile daha zengin bir carousel oluşturabiliriz:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active">
</li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1">
</li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slayt 1">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 1</h5>
<p>Açıklama 1</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slayt 2">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 2</h5>
<p>Açıklama 2</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slayt 3">
<div class="carousel-caption d-none d-md-block">
<h5>Başlık 3</h5>
<p>Açıklama 3</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="visually-hidden">Sonraki</span>
</button>
</div>
6. Özet
Bootstrap Carousel, görsel içeriklerinizi kullanıcı dostu bir şekilde sunmanın etkili bir yoludur. Slaytlar arasında geçiş yapmak için otomatik veya manuel yöntemler kullanabilir, içerikleri daha ilgi çekici hale getirmek için başlık ve açıklamalar ekleyebilirsiniz. Carousel'ler, etkili görsel sunumlar oluşturmak için kullanılabilir. Daha fazla bilgi için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.