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.

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.

.carouselÖzellikle tek bir sayfada birden fazla karusel kullanıyorsanız, isteğe bağlı kontroller için benzersiz bir kimlik ayarladığınızdan emin olun .

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 ..img-fluid

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

Kontroller ile

Önceki ve sonraki kontrollere ekleme:

Öncesi Sonraki

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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.

Öncesi Sonraki

<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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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.

İlk slayt etiketi

Nulla vitae seçkin libero, bir pharetra augue mollis interdum.

İkinci slayt etiketi

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

Üçüncü slayt etiketi

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Öncesi Sonraki

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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. 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="".

yöntemler

.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">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})