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.

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

çapraz geçiş

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

Öncesi Sonraki

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

• direction: The direction in which the carousel is sliding (either "left" or "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…
})

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