Karusell

En bildspelskomponent för att cykla genom element – ​​bilder eller bilder med text – som en karusell.

Hur det fungerar

Karusellen är ett bildspel för att cykla genom en serie innehåll, byggt med CSS 3D-transformationer och lite JavaScript. Det fungerar med en serie bilder, text eller anpassad uppmärkning. Den innehåller också stöd för tidigare/nästa kontroller och indikatorer.

I webbläsare där Page Visibility API stöds kommer karusellen att undvika att glida när webbsidan inte är synlig för användaren (som när webbläsarfliken är inaktiv, webbläsarfönstret är minimerat, etc.).

Tänk på att kapslade karuseller inte stöds, och karuseller är i allmänhet inte kompatibla med tillgänglighetsstandarder.

Slutligen, om du bygger vårt JavaScript från källan, kräverutil.js det .

Exempel

Karuseller normaliserar inte automatiskt bildens dimensioner. Som sådan kan du behöva använda ytterligare verktyg eller anpassade stilar för att anpassa innehållet. Även om karuseller stöder föregående/nästa kontroller och indikatorer, krävs de inte uttryckligen. Lägg till och anpassa som du tycker passar.

Klassen .activemåste läggas till på en av bilderna annars syns inte karusellen. Se också till att ställa in ett unikt ID på .carouselför valfria kontroller, särskilt om du använder flera karuseller på en enda sida. Kontroll- och indikatorelement måste ha ett data-targetattribut (eller hrefför länkar) som matchar .carouselelementets id.

Endast diabilder

Här är en karusell med endast rutschbanor. Observera förekomsten av .d-blockoch .w-100på karusellbilder för att förhindra webbläsarens standardbildjustering.

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

Med kontroller

Lägger till föregående och nästa kontroller:

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

Med indikatorer

Du kan också lägga till indikatorerna i karusellen, tillsammans med kontrollerna.

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

Med bildtexter

Lägg enkelt till bildtexter till dina bilder med .carousel-captionelementet i valfri .carousel-item. De kan enkelt döljas i mindre visningsportar, som visas nedan, med valfria skärmverktyg . Vi gömmer dem först med .d-noneoch tar tillbaka dem på medelstora enheter med .d-md-block.

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

Crossfade

Lägg .carousel-fadetill i din karusell för att animera bilder med en tona övergång istället för en bild.

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

Individuellt .carousel-itemintervall

Lägg data-interval=""till en .carousel-itemför att ändra hur lång tid det ska gå mellan att automatiskt cykla till nästa objekt.

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

Användande

Via dataattribut

Använd dataattribut för att enkelt kontrollera karusellens position. data-slideaccepterar nyckelorden preveller next, vilket ändrar bildens position i förhållande till dess nuvarande position. Alternativt kan du använda data-slide-toför att skicka ett obearbetat diabildsindex till karusellen data-slide-to="2", vilket skiftar objektglaspositionen till ett visst index som börjar med 0.

Attributet data-ride="carousel"används för att markera en karusell som animering med början vid sidladdning. Den kan inte användas i kombination med (redundant och onödig) explicit JavaScript-initiering av samma karusell.

Via JavaScript

Ring karusellen manuellt med:

$('.carousel').carousel()

alternativ

Alternativ kan skickas via dataattribut eller JavaScript. För dataattribut, lägg till alternativnamnet till data-, som i data-interval="".

Metoder

.carousel(options)

Initierar karusellen med ett valfritt alternativ objectoch börjar cykla igenom föremål.

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

.carousel('cycle')

Cyklar genom karusellföremålen från vänster till höger.

.carousel('pause')

Stoppar karusellen från att cykla genom föremål.

.carousel(number)

Cyklar karusellen till en viss bildruta (0-baserad, liknande en array). Återgår till den som ringer innan målobjektet har visats (dvs innan slid.bs.carouselhändelsen inträffar).

.carousel('prev')

Går till föregående post. Återgår till den som ringer innan föregående objekt har visats (dvs innan slid.bs.carouselhändelsen inträffar).

.carousel('next')

Går till nästa objekt. Återgår till den som ringer innan nästa objekt har visats (dvs innan slid.bs.carouselhändelsen inträffar).

.carousel('dispose')

Förstör ett elements karusell.

evenemang

Bootstraps karusellklass avslöjar två händelser för att koppla in karusellfunktionalitet. Båda händelserna har följande ytterligare egenskaper:

• direction: Den riktning i vilken karusellen glider (antingen "left"eller "right").
• relatedTarget: DOM-elementet som skjuts på plats som det aktiva objektet.
• from: Indexet för det aktuella objektet
• to: Indexet för nästa objekt

Alla karusellhändelser avfyras mot själva karusellen (dvs. vid <div class="carousel">).

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

Ändra övergångens varaktighet

Övergångslängden för .carousel-itemkan ändras med $carousel-transitionSass-variabeln före kompilering eller anpassade stilar om du använder den kompilerade CSS. Om flera övergångar tillämpas, se till att transformationsövergången definieras först (t.ex. transition: transform 2s ease, opacity .5s ease-out).