Hringekja

Skyggnusýningarhluti til að hjóla í gegnum þætti—myndir eða textaskyggnur—eins og hringekju.

Hvernig það virkar

Hringekjan er myndasýning til að hjóla í gegnum röð af efni, byggð með CSS 3D umbreytingum og smá JavaScript. Það virkar með röð mynda, texta eða sérsniðinna merkingar. Það felur einnig í sér stuðning við fyrri/næstu stýringar og vísbendingar.

Í vöfrum þar sem Page Visibility API er studd mun hringekjan forðast að renna þegar vefsíðan er ekki sýnileg notandanum (svo sem þegar vafraflipi er óvirkur, vafraglugginn er lágmarkaður o.s.frv.).

Vinsamlegast hafðu í huga að hreiður hringekjur eru ekki studdar og hringekjur eru almennt ekki í samræmi við aðgengisstaðla.

Að lokum, ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .

Dæmi

Hringekjur staðla ekki sjálfkrafa stærð skyggnu. Sem slík gætirðu þurft að nota viðbótartól eða sérsniðna stíla til að stærð innihalds á viðeigandi hátt. Þó hringekjur styðji fyrri/næstu stýringar og vísbendingar, þá er ekki beinlínis krafist þeirra. Bættu við og sérsníddu eins og þér sýnist.

Bæta .activeþarf bekknum við eina af glærunum annars sést hringekjan ekki. Vertu einnig viss um að stilla einstakt auðkenni á .carouselvalfrjálsum stjórntækjum, sérstaklega ef þú ert að nota margar hringekjur á einni síðu. Stýri- og vísirþættir verða að hafa data-targeteigind (eða hreffyrir tengla) sem passar við auðkenni .carouselþáttarins.

Aðeins skyggnur

Hér er hringekja með rennibrautum eingöngu. Athugaðu tilvist .d-blockog .w-100á hringekjumyndum til að koma í veg fyrir sjálfgefna myndröðun vafra.

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

Með stjórntækjum

Bætir við fyrri og næstu stjórntækjum:

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

Með vísa

Þú getur líka bætt vísunum við hringekjuna ásamt stjórntækjunum líka.

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

Með myndatexta

Bættu texta við skyggnurnar þínar auðveldlega með .carousel-captionþættinum í hvaða .carousel-item. Auðvelt er að fela þær á minni útsýnisgáttum, eins og sýnt er hér að neðan, með valfrjálsum skjátólum . Við felum þá fyrst með .d-noneog færum þá aftur á meðalstór tæki með .d-md-block.

Fyrsta skyggnumerki

Nulla vitae elit libero, a pharetra augue mollis interdum.

Annað skyggnumerki

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Þriðja skyggnumerki

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

Bættu .carousel-fadevið hringekjuna þína til að lífga skyggnur með dofnabreytingum í stað skyggnu.

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

Notkun

Í gegnum gagnaeiginleika

Notaðu gagnaeiginleika til að stjórna staðsetningu hringekjunnar auðveldlega. data-slidesamþykkir lykilorðin preveða next, sem breytir staðsetningu skyggnunnar miðað við núverandi staðsetningu. Að öðrum kosti er hægt að nota data-slide-totil að senda hráa skyggnuvísitölu í hringekjuna data-slide-to="2", sem færir skyggnustöðuna yfir á tiltekna vísitölu sem byrjar á 0.

Eigindin data-ride="carousel"er notuð til að merkja hringekju sem hreyfimynd frá og með hleðslu síðu. Það er ekki hægt að nota það ásamt (óþarfi og óþarfa) skýrri JavaScript frumstillingu á sömu hringekjunni.

Með JavaScript

Hringdu handvirkt í hringekju með:

$('.carousel').carousel()

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-interval="".

Nafn	Tegund	Sjálfgefið	Lýsing
bil	númer	5000	Tíminn sem líður á milli þess að hlutur er hjólaður sjálfkrafa. Ef það er rangt mun hringekjan ekki ganga sjálfkrafa.
lyklaborð	Boolean	satt	Hvort hringekjan eigi að bregðast við lyklaborðsviðburðum.
hlé	strengur \| Boolean	"sveima"	Ef stillt er á `"hover"`, gerir hlé á hjólreiðum hringekjunnar á `mouseenter`og heldur áfram að hjóla hringekjuna á `mouseleave`. Ef stillt er á `false`, mun það ekki gera hlé á hringekjunni með því að sveima yfir hringekjunni. Á snertitækjum, þegar stillt er á `"hover"`, mun hjólreiðar gera hlé á `touchend`(þegar notandinn hefur lokið samskiptum við hringekjuna) í tvö hlé, áður en það hefst sjálfkrafa aftur. Athugaðu að þetta er til viðbótar við ofangreinda músahegðun.
hjóla	strengur	rangt	Spilar hringekjuna sjálfkrafa eftir að notandinn hefur valið fyrsta atriðið handvirkt. Ef „carousel“ spilar hringekjuna sjálfkrafa á hleðslu.
vefja	Boolean	satt	Hvort hringekjan ætti að hjóla stöðugt eða hafa erfið stopp.

Aðferðir

Ósamstilltar aðferðir og umskipti

Allar API aðferðir eru ósamstilltar og hefja umskipti . Þeir snúa aftur til þess sem hringir um leið og umskiptin eru hafin en áður en þeim lýkur . Að auki verður aðferðakall á umbreytingarhluta hunsað .

Sjá JavaScript skjölin okkar fyrir frekari upplýsingar.

`.carousel(options)`

Frumstillir hringekjuna með valkvæðum valkostum objectog byrjar að hjóla í gegnum hluti.

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

`.carousel('cycle')`

Hringur í gegnum hringekjuhlutina frá vinstri til hægri.

`.carousel('pause')`

Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.

`.carousel(number)`

Hringir hringekjuna að tilteknum ramma (miðað við 0, svipað og fylki). Snýr aftur til þess sem hringir áður en markatriðið hefur verið sýnt (þ.e. áður en slid.bs.carouselatburðurinn á sér stað).

`.carousel('prev')`

Fer að fyrra atriði. Snýr aftur til þess sem hringir áður en fyrri hluturinn hefur verið sýndur (þ.e. áður en slid.bs.carouselatburðurinn á sér stað).

`.carousel('next')`

Fer í næsta atriði. Snýr aftur til þess sem hringir áður en næsta atriði hefur verið sýnt (þ.e. áður en slid.bs.carouselatburðurinn á sér stað).

`.carousel('dispose')`

Eyðileggur hringekju frumefnis.

Viðburðir

Hringekjuflokkur Bootstrap afhjúpar tvo atburði til að tengjast hringekjuvirkni. Báðir viðburðir hafa eftirfarandi viðbótareiginleika:

direction: Sú átt sem hringekjan rennur í (annaðhvort "left"eða "right").
relatedTarget: DOM-einingunni sem verið er að renna á sinn stað sem virki hluturinn.
from: Vísitalan á núverandi lið
to: Vísitalan á næsta lið

Allir hringekjuviðburðir eru skotnir á hringekjuna sjálfa (þ.e. á <div class="carousel">).

Tegund atburðar	Lýsing
rennibraut.bs.hringekja	Þessi atburður ræsir strax þegar `slide`tilviksaðferðin er kölluð fram.
renna.bs.hringekja	Þessi atburður er ræstur þegar hringekjan hefur lokið rennibraut sinni.

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

Breyta tímalengd umskipta

Hægt .carousel-itemer að breyta umbreytingartímanum með $carousel-transitionSass breytunni áður en þú safnar saman eða sérsniðnum stílum ef þú ert að nota samansetta CSS. Ef mörgum umbreytingum er beitt skaltu ganga úr skugga um að umbreytingin sé skilgreind fyrst (td transition: transform 2s ease, opacity .5s ease-out).