Ana içeriğe geç Dokümanlar navigasyonuna atla
Check
in English

atlıkarınca

Bir atlıkarınca gibi öğeler (görüntüler veya metin slaytları) arasında geçiş yapmak için bir slayt gösterisi bileşeni.

Bu sayfada

Nasıl çalışır

Döngü, CSS 3D dönüşümleri ve biraz JavaScript ile oluşturulmuş bir dizi içerik arasında geçiş yapmak için bir slayt gösterisidir. Bir dizi resim, metin veya özel işaretleme ile çalışır. Ayrıca önceki/sonraki kontroller ve göstergeler için destek içerir.

Sayfa Görünürlük API'sinin desteklendiği tarayıcılarda , web sayfası kullanıcı tarafından görülmediğinde (tarayıcı sekmesi etkin olmadığında, tarayıcı penceresi simge durumuna küçültüldüğünde vb.) atlıkarınca kaymayı önleyecektir.

Bu bileşenin animasyon efekti prefers-reduced-motionortam sorgusuna bağlıdır. Erişilebilirlik belgelerimizin azaltılmış hareket bölümüne bakın .

Lütfen iç içe dönen karusellerin desteklenmediğini ve karusellerin genellikle erişilebilirlik standartlarıyla uyumlu olmadığını unutmayın.

Örnek

Döngüler, slayt boyutlarını otomatik olarak normalleştirmez. Bu nedenle, içeriği uygun şekilde boyutlandırmak için ek yardımcı programlar veya özel stiller kullanmanız gerekebilir. Döngüler önceki/sonraki kontrolleri ve göstergeleri desteklerken, bunlar açıkça gerekli değildir. Uygun gördüğünüz gibi ekleyin ve özelleştirin.

Sınıfın .activeslaytlardan birine eklenmesi gerekiyor, aksi takdirde atlıkarınca görünmez. Ayrıca , özellikle tek bir sayfada birden fazla karusel kullanıyorsanız, isteğe bağlı kontroller için idbenzersiz bir ayar ayarladığınızdan emin olun . .carouselKontrol ve gösterge öğeleri, öğeninkiyle eşleşen bir özniteliğe (veya bağlantılar için) sahip data-bs-targetolmalıdır .hrefid.carousel

Yalnızca slaytlar

Burada sadece kaydıraklı bir atlıkarınca var. Tarayıcı varsayılan görüntü hizalamasını önlemek için .d-blockve atlıkarınca görüntülerinin varlığına dikkat edin ..w-100

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

Kontroller ile

Önceki ve sonraki kontrollere ekleme. Öğeleri kullanmanızı öneririz , ancak öğeleri ile <button>de kullanabilirsiniz .<a>role="button"

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

göstergeler ile

Kontrollerin yanı sıra göstergeleri de döner tablaya ekleyebilirsiniz.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Altyazılı

.carousel-captionHerhangi bir içindeki öğeyle slaytlarınıza kolayca altyazı ekleyin .carousel-item. İsteğe bağlı görüntüleme yardımcı programları ile aşağıda gösterildiği gibi daha küçük görünüm pencerelerinde kolayca gizlenebilirler . Bunları başlangıçta ile saklıyoruz .d-noneve orta ölçekli cihazlarda .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

çapraz geçiş

.carousel-fadeSlayt yerine solma geçişiyle slaytları canlandırmak için atlıkarıncanıza ekleyin . Dönen içeriğinize bağlı olarak (örneğin, yalnızca metin slaytları), uygun çapraz geçiş için s'ye .bg-bodybazı özel CSS eklemek veya bazı özel CSS'ler eklemek isteyebilirsiniz ..carousel-item

html 
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

data-bs-interval=""Bir .carousel-itemsonraki öğeye otomatik geçiş arasında gecikme süresini değiştirmek için a'ya ekleyin .

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dokunarak kaydırmayı devre dışı bırak

Döngüler, slaytlar arasında hareket etmek için dokunmatik ekranlı cihazlarda sola/sağa kaydırmayı destekler. data-bs-touchBu özellik kullanılarak devre dışı bırakılabilir . Aşağıdaki örnek de data-bs-rideözniteliği içermediğinden otomatik olarak oynatılmaz.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Karanlık varyant

Daha koyu kontroller, göstergeler ve başlıklar için .carousel-darkekleyin . Kontroller, CSS özelliği .carouselile varsayılan beyaz dolgularından tersine çevrildi . Altyazılar ve kontroller, ve filteröğesini özelleştiren ek Sass değişkenlerine sahiptir .colorbackground-color

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Özel geçiş

Derlenmiş CSS kullanıyorsanız, geçiş süresi derlemeden önce Sass değişkeni veya özel stiller .carousel-itemile değiştirilebilir . $carousel-transition-durationBirden çok geçiş uygulanırsa, önce dönüşüm geçişinin tanımlandığından emin olun (örn transition: transform 2s ease, opacity .5s ease-out. ).

küstah

Değişkenler

Tüm karuseller için değişkenler:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Karanlık atlıkarınca için değişkenler :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

kullanım

Veri öznitelikleri aracılığıyla

Döngü konumunu kolayca kontrol etmek için veri özniteliklerini kullanın. slayt konumunu geçerli konumuna göre değiştiren veya data-bs-slideanahtar sözcüklerini kabul eder . Alternatif olarak, slayt konumunu ile başlayan belirli bir dizine kaydıran atlıkarıncaya ham bir slayt indeksi iletmek için kullanın .prevnextdata-bs-slide-todata-bs-slide-to="2"0

Nitelik data-bs-ride="carousel", bir atlıkarıncayı sayfa yüklendiğinden başlayarak animasyon olarak işaretlemek için kullanılır. Karuselinizi başlatmak için kullanmıyorsanız data-bs-ride="carousel", kendiniz başlatmanız gerekir. Aynı döngünün (gereksiz ve gereksiz) açık JavaScript başlatmasıyla birlikte kullanılamaz.

JavaScript aracılığıyla

Carousel'i şu şekilde manuel olarak arayın:

const carousel = new bootstrap.Carousel('#myCarousel')

Seçenekler

Seçenekler veri öznitelikleri veya JavaScript aracılığıyla iletilebildiğinden data-bs-, örneğinde olduğu gibi öğesine bir seçenek adı ekleyebilirsiniz data-bs-animation="{value}". Seçenekleri veri öznitelikleri üzerinden geçirirken , seçenek adının “ camelCase ” yerine “ kebab-case ” olarak değiştirildiğinden emin olun. Örneğin, data-bs-custom-class="beautifier"yerine kullanın data-bs-customClass="beautifier".

Bootstrap 5.2.0'dan itibaren, tüm bileşenler , bir JSON dizesi olarak basit bileşen yapılandırmasını barındırabilen deneysel bir ayrılmış veri özniteliğini destekler. data-bs-configBir öğe data-bs-config='{"delay":0, "title":123}'ve data-bs-title="456"özniteliklere sahip olduğunda, nihai titledeğer olacak 456ve ayrı veri öznitelikleri üzerinde verilen değerleri geçersiz kılacaktır data-bs-config. Ek olarak, mevcut veri öznitelikleri, gibi JSON değerlerini barındırabilir data-bs-delay='{"show":0,"hide":150}'.

İsim Tip Varsayılan Tanım
interval sayı 5000 Bir öğenin otomatik olarak döndürülmesi arasındaki gecikme süresi.
keyboard boole true Karuselin klavye olaylarına tepki vermesi gerekip gerekmediği.
pause dize, boole "hover" olarak ayarlanırsa "hover", atlıkarınca açık çevrimini duraklatır ve atlıkarınca açık mouseenterçevrimini sürdürür mouseleave. olarak ayarlanırsa false, atlıkarınca üzerinde gezinmek onu duraklatmaz. Dokunma özellikli cihazlarda, olarak ayarlandığında "hover", döngü touchendotomatik olarak devam etmeden önce (kullanıcı karusel ile etkileşimi bitirdiğinde) iki aralık boyunca duraklar. Bu, fare davranışına ektir.
ride dize, boole false olarak ayarlanırsa true, kullanıcı ilk öğeyi manuel olarak döndürdükten sonra döngüyü otomatik olarak oynatır. olarak ayarlanırsa "carousel", karuseli yükte otomatik olarak oynatır.
touch boole true Karuselin dokunmatik ekranlı cihazlarda sola/sağa kaydırma etkileşimlerini destekleyip desteklemeyeceği.
wrap boole true Karuselin sürekli dönmesi mi yoksa sert duruşları mı olması gerektiği.

yöntemler

Asenkron yöntemler ve geçişler

Tüm API yöntemleri eşzamansızdır ve bir geçiş başlatır . Geçiş başlar başlamaz ancak bitmeden arayan kişiye geri dönerler . Ek olarak, geçiş yapan bir bileşen üzerindeki bir yöntem çağrısı yoksayılacaktır .

Daha fazla bilgi için JavaScript belgelerimize bakın .

Örneğin, ek seçeneklerle başlatmak ve öğeler arasında geçiş yapmaya başlamak için, atlıkarınca oluşturucuyla bir atlıkarınca örneği oluşturabilirsiniz:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Yöntem Tanım
cycle Döngü öğeleri arasında soldan sağa doğru geçiş yapar.
dispose Bir elementin karuselini yok eder. (DOM öğesinde depolanan verileri kaldırır)
getInstance Bir DOM öğesiyle ilişkili atlıkarınca örneğini almanızı sağlayan statik yöntem, bunu şu şekilde kullanabilirsiniz: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Bir DOM öğesiyle ilişkilendirilmiş bir atlıkarınca örneği döndüren veya başlatılmamış olması durumunda yeni bir tane oluşturan statik yöntem. Bunu şu şekilde kullanabilirsiniz: bootstrap.Carousel.getOrCreateInstance(element).
next Bir sonraki öğeye geçiş yapar. Bir sonraki öğe gösterilmeden önce arayana geri döner (örneğin, slid.bs.carouselolay gerçekleşmeden önce).
nextWhenVisible Sayfa görünür olmadığında veya atlıkarınca ya da üst öğesi görünür olmadığında atlıkarıncayı bir sonrakine döndürmeyin. Hedef öğe gösterilmeden önce arayana döner .
pause Karuselin öğeler arasında dolaşmasını durdurur.
prev Önceki öğeye geçiş yapar. Önceki öğe gösterilmeden önce arayana geri döner (ör. slid.bs.carouselolay gerçekleşmeden önce).
to Döngü belirli bir kareye (0 tabanlı, bir diziye benzer) döner. Hedef öğe gösterilmeden önce arayana geri döner (örneğin, slid.bs.carouselolay gerçekleşmeden önce).

Olaylar

Bootstrap'in carousel sınıfı, carousel işlevselliğine bağlanmak için iki olayı ortaya çıkarır. Her iki olay da aşağıdaki ek özelliklere sahiptir:

  • direction: Karuselin kaydığı yön (ya "left"veya "right").
  • relatedTarget: Etkin öğe olarak yerine kaydırılan DOM öğesi.
  • from: Geçerli öğenin dizini
  • to: Bir sonraki öğenin dizini

Tüm atlıkarınca olayları atlıkarıncanın kendisine ateşlenir (yani 'de <div class="carousel">).

Etkinlik tipi Tanım
slid.bs.carousel Atlıkarınca slayt geçişini tamamladığında tetiklenir.
slide.bs.carousel slideÖrnek yöntemi çağrıldığında hemen tetiklenir. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})