Source

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.

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.

Son olarak, JavaScript'imiziutil.js kaynaktan oluşturuyorsanız, .

Ö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. .carouselAyrıca , özellikle tek bir sayfada birden çok karusel kullanıyorsanız, isteğe bağlı denetimler için benzersiz bir kimlik ayarladığınızdan emin olun . Kontrol ve gösterge öğeleri , öğenin kimliğiyle eşleşen bir data-targetözniteliğe (veya bağlantılar için) sahip olmalıdır .href.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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

göstergeler ile

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

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

çapraz geçiş

.carousel-fadeSlayt yerine solma geçişiyle slaytları canlandırmak için atlıkarıncanıza ekleyin .

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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-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-slide-todata-slide-to="2"0

Nitelik data-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-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:

$('.carousel').carousel()

Seçenekler

Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, seçenek adını olduğu data-gibi ekleyin data-interval="".

İsim Tip Varsayılan Tanım
Aralık sayı 5000 Bir öğenin otomatik olarak döndürülmesi arasındaki gecikme süresi. False ise, atlıkarınca otomatik olarak döngüye girmez.
tuş takımı boole doğru Karuselin klavye olaylarına tepki vermesi gerekip gerekmediği.
Duraklat dize | boole "uçur"

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. Bunun, yukarıdaki fare davranışına ek olduğunu unutmayın.
sürmek sicim yanlış Kullanıcı ilk öğeyi manuel olarak döndürdükten sonra atlıkarıncayı otomatik olarak oynatır. "Atlıkarınca" ise, atlı karıncayı yükte otomatik olarak oynatır.
paketlemek boole doğru Karuselin sürekli dönmesi mi yoksa sert duruşları mı olması gerektiği.
dokunmak boole doğru Karuselin dokunmatik ekranlı cihazlarda sola/sağa kaydırma etkileşimlerini destekleyip desteklemeyeceğ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 .

.carousel(options)

Atlıkarıncayı isteğe bağlı seçeneklerle objectbaşlatır ve öğeler arasında geçiş yapmaya başlar.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Döngü öğeleri arasında soldan sağa doğru geçiş yapar.

.carousel('pause')

Karuselin öğeler arasında dolaşmasını durdurur.

.carousel(number)

Döngü belirli bir kareye (0 tabanlı, bir diziye benzer) döner. Hedef öğe gösterilmeden (yani slid.bs.carouselolay gerçekleşmeden önce) arayana geri döner.

.carousel('prev')

Önceki öğeye geçiş yapar. Bir önceki öğe gösterilmeden önce (yani slid.bs.carouselolay meydana gelmeden önce) arayana geri döner.

.carousel('next')

Bir sonraki öğeye geçiş yapar. Bir sonraki öğe gösterilmeden (yani slid.bs.carouselolay gerçekleşmeden önce) arayana geri döner.

.carousel('dispose')

Bir elementin karuselini yok eder.

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
slayt.bs.carousel Bu olay, slideörnek yöntemi çağrıldığında hemen tetiklenir.
slid.bs.carousel Bu olay, atlıkarınca slayt geçişini tamamladığında tetiklenir. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Geçiş süresini değiştir

Derlenmiş CSS kullanıyorsanız, geçiş süresi derlemeden önce Sass değişkeni veya özel stiller .carousel-itemile değiştirilebilir . $carousel-transitionBirden ç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).