Karrousel

'n Skyfievertoning-komponent vir fietsry deur elemente - prente of skyfies van teks - soos 'n karrousel.

Hoe dit werk

Die karrousel is 'n skyfievertoning vir fietsry deur 'n reeks inhoud, gebou met CSS 3D-transformasies en 'n bietjie JavaScript. Dit werk met 'n reeks beelde, teks of persoonlike opmaak. Dit sluit ook ondersteuning vir vorige/volgende kontroles en aanwysers in.

In blaaiers waar die bladsysigbaarheid-API ondersteun word, sal die karrousel gly vermy wanneer die webblad nie vir die gebruiker sigbaar is nie (soos wanneer die blaaieroortjie onaktief is, die blaaiervenster geminimaliseer word, ens.).

Neem asseblief kennis dat geneste karrousels nie gesteun word nie, en karrousels voldoen oor die algemeen nie aan toeganklikheidstandaarde nie.

Laastens, as jy ons JavaScript vanaf die bron bou, vereisutil.js dit .

Voorbeeld

Karrousels normaliseer nie outomaties skyfie-afmetings nie. As sodanig moet jy dalk bykomende nutsprogramme of pasgemaakte style gebruik om die inhoud op die regte grootte te kry. Terwyl karrousels vorige/volgende kontroles en aanwysers ondersteun, word dit nie uitdruklik vereis nie. Voeg by en pasmaak soos jy goeddink.

Die .activeklas moet by een van die skyfies gevoeg word anders sal die karrousel nie sigbaar wees nie. Maak ook seker dat jy 'n unieke ID op die .carouselvir opsionele kontroles stel, veral as jy verskeie karrousels op 'n enkele bladsy gebruik. Beheer- en aanwyserelemente moet 'n data-targetkenmerk hê (of hrefvir skakels) wat ooreenstem met die id van die .carouselelement.

Slegs skyfies

Hier is 'n karrousel met slegs skyfies. Let op die teenwoordigheid van die .d-blocken .w-100op karrouselbeelde om blaaier verstekbeeldbelyning te voorkom.

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

Met kontroles

Voeg die vorige en volgende kontroles by:

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

Met aanwysers

Jy kan ook die aanwysers by die karrousel voeg, langs die kontroles ook.

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

Met byskrifte

Voeg byskrifte maklik by jou skyfies met die .carousel-captionelement binne enige .carousel-item. Hulle kan maklik op kleiner viewports versteek word, soos hieronder getoon, met opsionele vertoonhulpmiddels . Ons steek hulle aanvanklik weg met .d-noneen bring hulle terug op mediumgrootte toestelle met .d-md-block.

Eerste skyfie etiket

Nulla vitae elit libero, 'n pharetra augue mollis interdum.

Tweede skyfie-etiket

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Derde skyfie-etiket

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

Crossfade

Voeg .carousel-fadeby jou karrousel om skyfies te animeer met 'n vervaag-oorgang in plaas van 'n skyfie.

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

Gebruik

Via data-eienskappe

Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slideaanvaar die sleutelwoorde prevof next, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-toom 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0.

Die data-ride="carousel"kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.

Via JavaScript

Bel karrousel handmatig met:

$('.carousel').carousel()

Opsies

Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-interval="".

Naam	Tik	Verstek	Beskrywing
interval	nommer	5000	Die tyd om te vertraag tussen die outomatiese fietsry van 'n item. As dit vals is, sal die karrousel nie outomaties loop nie.
sleutelbord	boolean	waar	Of die karrousel op sleutelbordgebeure moet reageer.
pouse	tou \| boolean	"sweef"	As dit op gestel is `"hover"`, onderbreek die fietsry van die karrousel aan `mouseenter`en hervat die fietsry van die karrousel aan `mouseleave`. As dit op gestel is `false`, sal dit nie onderbreek word deur oor die karrousel te beweeg nie. Op aanraking-geaktiveerde toestelle, wanneer dit op gestel is `"hover"`, sal fietsry `touchend`vir twee intervalle onderbreek (sodra die gebruiker klaar is met interaksie met die karrousel), voordat dit outomaties hervat word. Let daarop dat dit bykomend tot bogenoemde muisgedrag is.
ry	string	onwaar	Speel die karrousel outomaties nadat die gebruiker die eerste item met die hand gebruik het. As "karrousel", outomaties speel die karrousel op laai.
toevou	boolean	waar	Of die karrousel aanhoudend moet fietsry of harde stops moet hê.

Metodes

Asinchroniese metodes en oorgange

Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .

Sien ons JavaScript-dokumentasie vir meer inligting.

`.carousel(options)`

Inisialiseer die karrousel met 'n opsionele opsies objecten begin deur items ry.

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

`.carousel('cycle')`

Blaai deur die karrousel-items van links na regs.

`.carousel('pause')`

Stop die karrousel om deur items te fiets.

`.carousel(number)`

Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking). Keer terug na die oproeper voordat die teikenitem gewys is (dws voor die slid.bs.carouselgebeurtenis plaasvind).

`.carousel('prev')`

Blaai na die vorige item. Keer terug na die oproeper voordat die vorige item gewys is (dws voor die slid.bs.carouselgebeurtenis plaasvind).

`.carousel('next')`

Blaai na die volgende item. Keer terug na die oproeper voordat die volgende item gewys is (dws voor die slid.bs.carouselgebeurtenis plaasvind).

`.carousel('dispose')`

Vernietig 'n element se karrousel.

Gebeurtenisse

Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit. Albei geleenthede het die volgende bykomende eienskappe:

direction: Die rigting waarin die karrousel gly (óf "left"óf "right").
relatedTarget: Die DOM-element wat in plek geskuif word as die aktiewe item.
from: Die indeks van die huidige item
to: Die indeks van die volgende item

Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">).

Soort gebeurtenis	Beskrywing
slide.bs.karrousel	Hierdie gebeurtenis brand onmiddellik wanneer die `slide`instansiemetode aangeroep word.
gly.bs.karrousel	Hierdie gebeurtenis word afgevuur wanneer die karrousel sy skyfie-oorgang voltooi het.

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

Verander oorgangsduur

Die oorgangsduur van .carousel-itemkan verander word met die $carousel-transitionSass-veranderlike voor samestelling of pasgemaakte style as jy die saamgestelde CSS gebruik. As veelvuldige oorgange toegepas word, maak seker dat die transformasie-oorgang eers gedefinieer word (bv. transition: transform 2s ease, opacity .5s ease-out).