Source

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 notanda (svo sem þegar vafraflipi er óvirkur, vafraglugginn er lágmarkaður o.s.frv.).

Hreyfiáhrif þessa íhluts eru háð prefers-reduced-motionmiðlunarfyrirspurninni. Sjá kaflann um minni hreyfingu í aðgengisskjölunum okkar .

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

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

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

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 þau í upphafi með .d-noneog komum þeim aftur á meðalstór tæki með .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 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>

Bættu data-interval=""við a .carousel-itemtil að breyta tímanum sem fresta á milli þess að hjóla sjálfkrafa yfir í næsta atriði.

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

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. Ef þú notar ekki data-ride="carousel"til að frumstilla hringekjuna þína þarftu að frumstilla hana sjálfur. Þ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
millibili 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 á mouseenterog 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.
snerta Boolean satt Hvort hringekjan ætti að styðja við strjúktu til vinstri/hægri á snertiskjátækjum.

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 viðburðar Lýsing
rennibraut.bs.hringekja Þessi atburður ræsir strax þegar slidetilviksað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).