Bootstrap Bileşenler Carousel 1 konusunu öğrenmek için ön koşul var mı?

Bu içerik temel seviyeden ileri seviyeye adım adım hazırlanmıştır. Kodları kopyalayıp Canlı Editör üzerinde test ederek kolayca pratik yapabilirsiniz.

Örnek kodları kendi projelerimde ücretsiz kullanabilir miyim?

Evet, PHP Hocası üzerindeki tüm kod örnekleri açık kaynak mantığıyla sunulmaktadır. Ticari veya kişisel projelerinizde serbestçe kullanabilirsiniz.

Takıldığım bir yerde nereden soru sorabilirim?

İçeriğin altındaki topluluk yorumları bölümünden sorunuzu iletebilirsiniz. Eğitmenlerimiz ve topluluk üyelerimiz kısa sürede yanıt verecektir.

Bootstrap Bileşenler Carousel 1 - Bootstrap 5 Dersleri

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çin active sı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.

Bootstrap Bileşenler Carousel 1