Crossfade

Přechody mezi snímky můžou také vypadat jinak – můžeme nastavit jejich „ztrácení“, místo posouvání.

Previous Next

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

Interval mezi přesuny

Do jednotlivých slidů (snímků) si můžeme také vepsat, jaký časový interval se na obrazovce „zdrží“. Pro každý slide je možné nastavit interval jiný.

Interval vepíšeme do class „carousel-item“:

Previous Next

<div id="carouselExampleInterval" class="carousel slide" data-bs-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="5000">
      <img src="#" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="10000">
      <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>