Hringekja

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

Á þessari síðu

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

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.

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 líka viss um að stilla einstakt idá .carouselfyrir valfrjálsa stýringar, sérstaklega ef þú ert að nota margar hringekjur á einni síðu. Stýri- og vísirþættir verða að hafa data-bs-targeteigind (eða hreffyrir tengla) sem passar idvið .carouselþáttinn.

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

Með stjórntækjum

Bætir við fyrri og næstu stjórntækjum. Við mælum með því að nota <button>þætti, en þú getur líka notað <a>þætti með role="button".

<div id="carouselExampleControls" class="carousel slide" 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="#carouselExampleControls" 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="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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

Nokkuð dæmigert staðgengilsefni fyrir fyrstu glæruna.

Annað skyggnumerki

Nokkuð dæmigert staðgengilsefni fyrir seinni glæruna.

Þriðja skyggnumerki

Nokkuð dæmigert staðgengilsefni fyrir þriðju glæruna.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-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>

Einstaklingsbil `.carousel-item`_

Bættu data-bs-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-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <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>

Slökktu á snertistrikun

Hringekja styðja að strjúka til vinstri/hægri á snertiskjátækjum til að fara á milli skyggna. Þetta er hægt að slökkva á með því að nota data-bs-toucheigindina. Dæmið hér að neðan inniheldur heldur ekki data-bs-rideeiginleikann og hefur data-bs-interval="false"svo það spilar ekki sjálfvirkt.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <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="#carouselExampleControlsNoTouching" 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="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dökk afbrigði

Bættu .carousel-darkvið .carouselfyrir dekkri stýringar, vísbendingar og myndatexta. Stýringum hefur verið snúið við frá sjálfgefna hvítu fyllingunni með filterCSS eiginleikanum. Skjátextar og stýringar hafa viðbótar Sass breytur sem sérsníða colorog background-color.

Fyrsta skyggnumerki

Nokkuð dæmigert staðgengilsefni fyrir fyrstu glæruna.

Annað skyggnumerki

Nokkuð dæmigert staðgengilsefni fyrir seinni glæruna.

Þriðja skyggnumerki

Nokkuð dæmigert staðgengilsefni fyrir þriðju glæruna.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Sérsniðin umskipti

Hægt .carousel-itemer að breyta umbreytingartímanum með $carousel-transition-durationSass 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).

Sass

Breytur

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Notkun

Í gegnum gagnaeiginleika

Notaðu gagnaeiginleika til að stjórna staðsetningu hringekjunnar auðveldlega. data-bs-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-bs-slide-totil að senda hráa skyggnuvísitölu í hringekjuna data-bs-slide-to="2", sem færir skyggnustöðuna yfir á tiltekna vísitölu sem byrjar á 0.

Eigindin data-bs-ride="carousel"er notuð til að merkja hringekju sem hreyfimynd frá og með hleðslu síðu. Ef þú notar ekki data-bs-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ð:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Valmöguleikar

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

Nafn	Tegund	Sjálfgefið	Lýsing
`interval`	númer	`5000`	Tíminn sem líður á milli þess að hlutur er hjólaður sjálfkrafa. Ef `false`, hringekja ekki sjálfkrafa hringrás.
`keyboard`	Boolean	`true`	Hvort hringekjan eigi að bregðast við lyklaborðsviðburðum.
`pause`	strengur \| Boolean	`'hover'`	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.
`ride`	strengur \| Boolean	`false`	Spilar hringekjuna sjálfkrafa eftir að notandinn hefur valið fyrsta atriðið handvirkt. Ef stillt er á `'carousel'`spilar hringekjuna sjálfkrafa við hleðslu.
`wrap`	Boolean	`true`	Hvort hringekjan ætti að hjóla stöðugt eða hafa erfið stopp.
`touch`	Boolean	`true`	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 .

Þú getur búið til hringekjutilvik með hringekjusmiðnum, til dæmis til að frumstilla með viðbótarvalkostum og byrja að hjóla í gegnum hluti:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Aðferð	Lýsing
`cycle`	Hringur í gegnum hringekjuhlutina frá vinstri til hægri.
`pause`	Kemur í veg fyrir að hringekjan hjóli í gegnum hluti.
`prev`	Fer að fyrra atriði. Snýr aftur til þess sem hringir áður en fyrri hluturinn hefur verið sýndur (td áður en `slid.bs.carousel`atburðurinn á sér stað).
`next`	Fer í næsta atriði. Snýr aftur til þess sem hringir áður en næsta atriði hefur verið sýnt (td áður en `slid.bs.carousel`atburðurinn á sér stað).
`nextWhenVisible`	Ekki hjóla hringekjuna á næstu þegar síðan er ekki sýnileg eða hringekjan eða foreldri hennar er ekki sýnileg. Snýr aftur til þess sem hringir áður en markatriðið hefur verið sýnt
`to`	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 (td áður en `slid.bs.carousel`atburðurinn á sér stað).
`dispose`	Eyðileggur hringekju frumefnis. (Fjarlægir vistuð gögn á DOM-einingunni)
`getInstance`	Static aðferð sem gerir þér kleift að fá hringekjutilvikið tengt við DOM frumefni, þú getur notað það svona:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	Statísk aðferð sem skilar hringekjutilviki sem tengist DOM-einingu eða býr til nýjan ef það var ekki frumstillt. Þú getur notað það svona:`bootstrap.Carousel.getOrCreateInstance(element)`

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
`slide.bs.carousel`	Kveikir strax þegar `slide`tilviksaðferðin er beitt.
`slid.bs.carousel`	Kveikt þegar hringekjan hefur lokið rennibrautinni.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Hringekja

Hvernig það virkar

Dæmi

Aðeins skyggnur

Með stjórntækjum

Með vísa

Með myndatexta

Fyrsta skyggnumerki

Annað skyggnumerki

Þriðja skyggnumerki

Crossfade

Einstaklingsbil .carousel-item_

Slökktu á snertistrikun

Dökk afbrigði

Fyrsta skyggnumerki

Annað skyggnumerki

Þriðja skyggnumerki

Sérsniðin umskipti

Sass

Breytur

Notkun

Í gegnum gagnaeiginleika

Með JavaScript

Valmöguleikar

Aðferðir

Ósamstilltar aðferðir og umskipti

Viðburðir

Einstaklingsbil `.carousel-item`_