Bootstrap Carousel ile Slider Yapımı: Kontroller, Seçenekler ve Olaylar

Carousel nasıl çalışır

Carousel, bir dizi içeriği sırayla gösteren bir slayt gösterisidir. Geçişler CSS dönüşümleriyle (transform) yapılır, hangi slaydın etkin olduğunu ve zamanlamayı ise JavaScript yönetir. Slaytların içine görsel, metin ya da kendi yazdığınız herhangi bir HTML koyabilirsiniz. Önceki ve sonraki kontrolleri ile göstergeler desteklenir ama zorunlu değildir.

Belgenin baştan belirttiği birkaç önemli nokta vardır. Tarayıcı Page Visibility API desteği sunuyorsa, sekme etkin değilken ya da pencere simge durumuna küçültülmüşken carousel slayt değiştirmez. İç içe carousel desteklenmez. Belge ayrıca carousel bileşenlerinin genel olarak erişilebilirlik standartlarıyla uyumlu olmadığını açıkça yazar; bu nedenle önemli bir bilgiyi yalnızca dönen bir slayda koymamanız iyi olur. Geçiş animasyonu prefers-reduced-motion medya sorgusuna bağlıdır, yani hareketi azaltmayı seçmiş kullanıcılar için animasyon kısıtlanır.

Carousel slaytların boyutunu kendiliğinden eşitlemez. Görseller farklı oranlardaysa slayt yüksekliği her geçişte değişir; bunu önlemek için aynı boyutta görseller kullanmanız ya da ek yardımcı sınıflar veya kendi CSS kurallarınızla yüksekliği sabitlemeniz gerekir. Resmî Bootstrap 5.0 örnek şablonu: Carousel sayfasında da her .carousel-item için CSS ile sabit bir yükseklik tanımlandığını görürsünüz.

En basit carousel: yalnızca slaytlar

Aşağıdaki örnek yalnızca slaytlardan oluşur. Görsellere eklenen .d-block ve .w-100 sınıfları, tarayıcının görselleri satır içi öğe olarak hizalamasını engeller ve görselin slayt genişliğini doldurmasını sağlar:

<div id="tanitimSlider" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slayt-1.jpg" class="d-block w-100" alt="Yeni koleksiyon">
    </div>
    <div class="carousel-item">
      <img src="slayt-2.jpg" class="d-block w-100" alt="Kampanya ürünleri">
    </div>
    <div class="carousel-item">
      <img src="slayt-3.jpg" class="d-block w-100" alt="Ücretsiz kargo">
    </div>
  </div>
</div>

Burada en sık atlanan ayrıntı .active sınıfıdır. Belge, slaytlardan birine bu sınıfı eklemezseniz carousel bileşeninin hiç görünmeyeceğini özellikle vurgular. Bunun nedeni derlenmiş CSS dosyasında .carousel-item öğesinin varsayılan olarak display: none almasıdır; yalnızca .active ve geçiş sınıfları taşıyan slaytlar görüntülenir. Görsellerin duyarlı davranışı için img-fluid ve ratio yazısına, .w-100 gibi boyut sınıfları için Bootstrap boyut sınıfları yazısına bakabilirsiniz.

Kapsayıcıdaki .slide sınıfı ilginç bir istisnadır: derlenmiş CSS dosyasında bu adla tanımlanmış bir kural yoktur. Sınıfı okuyan Bootstrap v5.0.2 kaynak kodu: carousel.js dosyasıdır. Slayt değişirken kaynak kod kapsayıcıda .slide olup olmadığına bakar; varsa sıradaki slayda yön sınıflarını ekleyip CSS geçişinin bitmesini bekler, yoksa .active sınıfını doğrudan yeni slayda taşır ve görüntü animasyonsuz, bir anda değişir. Yani kayma efekti istiyorsanız bu sınıfı silmemelisiniz; sınıf adı denetleyicileri onu “tanımsız sınıf” olarak işaretlese bile bilerek oradadır.

Resmî örnek şablon, carousel’i sayfanın en üstünde tam genişlikte bir tanıtım alanı olarak kullanır ve her slayttaki başlığı .text-start, varsayılan ortalama ve .text-end ile farklı hizalar. Böyle bir tasarımda görsel yerine renkli bir arka plan ya da SVG de kullanılabilir; carousel slaydın içinde ne olduğuyla ilgilenmez, yalnızca hangi .carousel-item öğesinin etkin olduğunu yönetir.

Kontroller, göstergeler ve slayt başlıkları

Önceki ve sonraki okları eklemek için belge <button> öğesi kullanmanızı önerir; <a> kullanacaksanız role="button" eklemelisiniz. Kontrol butonları data-bs-target ile carousel kapsayıcısının id değerini, data-bs-slide ile de yönü (prev veya next) belirtir. Ok simgeleri yalnızca görsel olduğundan aria-hidden="true" alır, butonun ekran okuyucu metni ise .visually-hidden sınıflı bir <span> içinde verilir.

Göstergeler .carousel-indicators içine konan butonlardır ve her biri data-bs-slide-to ile sıfırdan başlayan slayt sırasını taşır. Etkin slayda karşılık gelen göstergeye .active ve aria-current="true" eklenir. Slayt başlıkları için her .carousel-item içine .carousel-caption yerleştirirsiniz. Belgedeki örnekte başlıklar .d-none .d-md-block ile küçük ekranlarda gizlenir ve orta boy ekrandan itibaren görünür. Hepsini birleştiren örnek:

<div id="kampanyaSlider" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#kampanyaSlider" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slayt 1"></button>
    <button type="button" data-bs-target="#kampanyaSlider" data-bs-slide-to="1" aria-label="Slayt 2"></button>
    <button type="button" data-bs-target="#kampanyaSlider" data-bs-slide-to="2" aria-label="Slayt 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="kampanya-1.jpg" class="d-block w-100" alt="Kış indirimi">
      <div class="carousel-caption d-none d-md-block">
        <h5>Kış indirimi</h5>
        <p>Seçili ürünlerde yüzde 30 indirim.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="kampanya-2.jpg" class="d-block w-100" alt="Yeni gelenler">
      <div class="carousel-caption d-none d-md-block">
        <h5>Yeni gelenler</h5>
        <p>Bu haftanın yeni ürünlerine göz atın.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="kampanya-3.jpg" class="d-block w-100" alt="Ücretsiz kargo">
      <div class="carousel-caption d-none d-md-block">
        <h5>Ücretsiz kargo</h5>
        <p>Tüm siparişlerde geçerlidir.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#kampanyaSlider" 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="#kampanyaSlider" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Sonraki</span>
  </button>
</div>

Kontrol ve gösterge öğelerindeki data-bs-target değeri, carousel kapsayıcısının id değeriyle eşleşmek zorundadır. Bu yüzden belge, aynı sayfada birden fazla carousel kullanıyorsanız her birine ayrı ve benzersiz bir kimlik vermenizi ister; aksi hâlde bir slider’ın okları diğerini çevirir. Ekran boyutuna göre gizleme sınıflarının mantığı için Bootstrap display yazısına, .visually-hidden sınıfının ayrıntısı için erişilebilirlik yazısına göz atabilirsiniz.

Klavyeyle kullanım da hazırdır: keyboard seçeneği açıkken kaynak kod, carousel odaktayken sol ve sağ ok tuşlarını slayt değiştirmek için dinler; odak bir input ya da textarea içindeyse tuşlara karışmaz. Dokunmatik ekranlarda sola ve sağa kaydırma hareketiyle slayt değiştirilebilir.

Göstergelerdeki data-bs-slide-to değeri dizilerdeki gibi sıfırdan başlar: ilk slayt için 0, üçüncü slayt için 2 yazılır. Kontrollerdeki data-bs-slide ise göreli çalışır; prev ve next mevcut konuma göre bir adım geri ya da ileri gider. Otomatik dönüş için kaynak kod nextWhenVisible yöntemini kullanır: sayfa gizliyse ya da carousel veya üst öğesi görünür değilse bir sonraki slayda geçilmez. Bu yüzden carousel’i örneğin kapalı bir sekme panelinin içine koyduğunuzda, panel açılana kadar slaytlar ilerlemez. Göstergelerin sayısı ile slayt sayısının aynı olması da sizin sorumluluğunuzdadır; Bootstrap göstergeleri kendisi üretmez.

Crossfade, slayt başına süre ve dokunmayı kapatmak

Slaytların kaymak yerine birbirine karışarak geçmesini istiyorsanız carousel kapsayıcısına .carousel-fade eklersiniz. Her slaydın ekranda kalma süresini ayrı ayrı belirlemek için ise ilgili .carousel-item öğesine milisaniye cinsinden data-bs-interval verirsiniz. Aşağıdaki örnekte ilk slayt on saniye, ikinci slayt iki saniye kalır, üçüncüsü genel ayara (varsayılan 5000 ms) uyar:

<div id="solmaSlider" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="duyuru-1.jpg" class="d-block w-100" alt="Önemli duyuru">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="duyuru-2.jpg" class="d-block w-100" alt="Kısa hatırlatma">
    </div>
    <div class="carousel-item">
      <img src="duyuru-3.jpg" class="d-block w-100" alt="Genel bilgi">
    </div>
  </div>
</div>

Dokunmatik kaydırma desteği varsayılan olarak açıktır. Kapatmak için kapsayıcıya data-bs-touch="false" eklersiniz. Belgedeki örnek bunu otomatik oynatmayı kapatmakla birleştirir: kapsayıcıdan data-bs-ride kaldırılır ve data-bs-interval="false" verilir. Bu durumda slaytlar yalnızca kullanıcı oklara bastığında değişir:

<div id="elleSlider" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="adim-1.jpg" class="d-block w-100" alt="Kurulum adımı 1">
    </div>
    <div class="carousel-item">
      <img src="adim-2.jpg" class="d-block w-100" alt="Kurulum adımı 2">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#elleSlider" 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="#elleSlider" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Sonraki</span>
  </button>
</div>

Adım adım anlatım ya da ürün galerisi gibi kullanıcının kendi hızında ilerlemesi gereken içeriklerde otomatik dönüşü kapatmak genellikle daha kullanışlıdır; slaytın, kullanıcı okumadan değişmesi önlenir.

Koyu varyant ve geçiş süresini değiştirmek

Varsayılan kontroller, göstergeler ve başlıklar beyazdır; açık renkli görsellerin üstünde zor seçilir. Kapsayıcıya .carousel-dark eklediğinizde kontroller, göstergeler ve başlıklar koyulaşır. Belgeye göre okların beyaz dolgusu CSS filter özelliğiyle tersine çevrilir; Sass tarafında bu ayar $carousel-dark-control-icon-filter değişkeninde invert(1) grayscale(100) olarak tanımlıdır. Göstergenin etkin rengi $carousel-dark-indicator-active-bg, başlık rengi $carousel-dark-caption-color değişkeninden gelir.

<div id="koyuSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="acik-zemin-1.jpg" class="d-block w-100" alt="Açık zeminli görsel">
      <div class="carousel-caption d-none d-md-block">
        <h5>Açık zemin</h5>
        <p>Koyu kontroller burada daha iyi okunur.</p>
      </div>
    </div>
  </div>
</div>

Slayt geçişinin süresi $carousel-transition-duration değişkeniyle belirlenir ve varsayılanı .6s değeridir. Derlenmiş CSS kullanıyorsanız aynı ayarı kendi CSS kuralınızla değiştirebilirsiniz. Belge, birden fazla geçiş tanımlıyorsanız transform geçişini ilk sıraya koymanızı ister, örneğin transition: transform 2s ease, opacity .5s ease-out. Ok genişliği ($carousel-control-width, varsayılan yüzde 15), ok opaklığı ve gösterge ölçüleri de aynı değişken grubundadır; değişkenlerin nasıl ezildiğini Sass ile özelleştirme yazısında bulabilirsiniz.

JavaScript ile carousel: seçenekler

data-bs-ride="carousel" özniteliği, carousel’in sayfa yüklenirken başlatılıp oynatılmaya başlamasını sağlar. Bu özniteliği kullanmıyorsanız carousel’i kendiniz başlatmanız gerekir. Belge burada net bir uyarı yapar: aynı carousel için hem data-bs-ride="carousel" hem de ayrıca JavaScript ile başlatma kullanılmamalıdır; ikisi birlikte gereksiz ve çakışan bir kurulum olur. Koddan başlatmak için:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Seçenekleri veri öznitelikleriyle de verebilirsiniz; seçenek adının başına data-bs- eklenir. Belgedeki seçenek tablosu şöyledir:

pause seçeneği hover iken dokunmatik cihazlarda da ek bir davranış vardır: kullanıcı carousel ile etkileşimini bitirdiğinde (touchend) döngü iki aralık süresi boyunca durur, sonra kendiliğinden sürer. wrap: false verdiğinizde son slayttan sonra başa dönülmez, bu da sınırlı adımlı anlatımlar için uygundur.

Yöntemler ve olaylar

Carousel örneği üzerinden çağırabileceğiniz yöntemler belgede şöyle listelenir:

Tüm yöntemler eşzamansızdır ve geçiş başladığı anda döner. Geçiş sürerken yapılan bir çağrı yok sayılır; belge bunu tam olarak carousel üzerinden örnekler. Art arda iki to() çağrısı yaparsanız ikincisi kaybolur. Doğru yol, ikinci geçişi ilk geçişin bittiğini bildiren slid.bs.carousel olayına bağlamaktır:

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl)

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // 1. slayda gecis bittikten sonra calisir
})

carousel.to('1') // gecisi baslatir ve hemen doner
carousel.to('2') // yok sayilir: onceki gecis henuz bitmedi

Carousel iki olay yayar ve ikisi de .carousel öğesinin kendisinde tetiklenir. slide.bs.carousel geçiş başlar başlamaz, slid.bs.carousel ise geçiş tamamlandığında çalışır. Her iki olay nesnesinde dört ek özellik bulunur: direction kaymanın yönünü ("left" ya da "right"), relatedTarget etkin hâle gelen slayt öğesini, from mevcut slaydın sırasını, to ise gelecek slaydın sırasını verir. Bu özelliklerle örneğin “3 / 5” biçiminde bir sayaç güncelleyebilirsiniz:

var slider = document.getElementById('kampanyaSlider')
var sayac = document.getElementById('slaytSayaci')

slider.addEventListener('slid.bs.carousel', function (event) {
  sayac.textContent = (event.to + 1) + ' / 3'
})

Olay sistemi, preventDefault() kullanımı ve örnek alma yöntemleri bütün bileşenlerde aynı mantıkla çalışır; ortak kuralları Bootstrap JavaScript API yazısında topladık.

Sık yapılan hatalar

• Hiçbir slayta .active eklememek: Carousel tamamen görünmez olur. İlk slayda ve ilk göstergeye .active ekleyin.
• Oklar ile kimliğin uyuşmaması: data-bs-target değeri kapsayıcının id değeriyle aynı değilse oklar çalışmaz. Sayfada iki slider varsa kimlikleri farklı olmalıdır.
• Hem data-bs-ride hem new bootstrap.Carousel kullanmak: Belge bunu açıkça yasaklar. Birini seçin.
• Farklı boyutlu görseller: Slayt yüksekliği her geçişte zıplar. Aynı oranda görseller kullanın ya da yüksekliği CSS ile sabitleyin.
• Bootstrap 4 öznitelikleri: data-ride, data-slide ve data-interval v5’te çalışmaz; hepsine bs öneki gerekir. Ayrıntı için geçiş yazısına bakın.
• JavaScript dosyasını yüklememek: Carousel’in bütün slayt davranışı, kontrolleri ve göstergeleri JavaScript gerektirir. Kurulum için CDN kurulum yazısına bakın.
• İç içe carousel kurmak: Bir slaydın içine ikinci bir carousel koymak desteklenmez.

Diğer genel sorunlar için Bootstrap çalışmıyor yazısına göz atabilirsiniz.

Sık Sorulan Sorular

Bootstrap carousel otomatik dönmüyor, neden?

Kapsayıcıda data-bs-ride="carousel" yoksa slider yüklenişte oynamaz. Ayrıca data-bs-interval="false" verilmişse otomatik dönüş kapalıdır. Sekme arka plandayken dönmemesi ise Page Visibility API kaynaklı beklenen davranıştır.

Slayt süresini nasıl değiştiririm?

Bütün slaytlar için kapsayıcıya data-bs-interval="3000" gibi bir değer verin ya da JavaScript ile interval seçeneğini kullanın. Tek bir slayt için o .carousel-item öğesine ayrı data-bs-interval ekleyin.

Fare üstüne gelince durmasını nasıl engellerim?

pause seçeneğini false yapın; veri özniteliği olarak data-bs-pause="false" yazabilirsiniz.

Kayma yerine solma efekti mümkün mü?

Evet, kapsayıcıya .carousel-fade sınıfını ekleyin. .slide sınıfı da yerinde kalmalıdır.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap JavaScript API · Bootstrap modal · Görseller ve ratio · Display sınıfları · JavaScript öğrenme rehberi