Fara í aðalefni Farðu í skjalaleiðsögn
Check
in English

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.

html 
<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".

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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. Það fer eftir innihaldi hringekjunnar (td skyggnur eingöngu með texta), gætirðu viljað bæta við .bg-bodyeða sérsniðnum CSS við .carousel-items til að fá rétta yfirlitun.

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

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.

html 
<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 svo hann spilar ekki sjálfkrafa.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

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

Breytur fyrir allar hringekjur:

$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`)

Breytur fyrir myrku hringekjuna :

$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ð:

const carousel = new bootstrap.Carousel('#myCarousel')

Valmöguleikar

Þar sem hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript geturðu bætt valkostsheiti við data-bs-, eins og í data-bs-animation="{value}". Gakktu úr skugga um að breyta tilfelli tegundar valmöguleikans úr " camelCase " í " kebab-case " þegar þú sendir valkostina í gegnum gagnaeiginleika. Notaðu til dæmis data-bs-custom-class="beautifier"í staðinn fyrir data-bs-customClass="beautifier".

Frá og með Bootstrap 5.2.0 styðja allir íhlutir tilrauna frátekinn gagnaeiginleika data-bs-configsem getur hýst einfalda íhlutastillingu sem JSON streng. Þegar eining hefur data-bs-config='{"delay":0, "title":123}'og eiginleika verður data-bs-title="456"lokagildið og aðskildu gagnaeiginirnar munu hnekkja gildum sem gefin eru á . Að auki geta núverandi gagnaeiginleikar hýst JSON gildi eins og .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

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.
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 á 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. Þetta er til viðbótar við hegðun músarinnar.
ride strengur, boolean false Ef stillt er á truespilar hringekjuna sjálfkrafa eftir að notandinn hefur hringt í fyrsta atriðið handvirkt. Ef stillt er á "carousel"spilar hringekjuna sjálfkrafa við hleðslu.
touch Boolean true Hvort hringekjan ætti að styðja við strjúktu til vinstri/hægri á snertiskjátækjum.
wrap Boolean true 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 .

Þú 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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Aðferð Lýsing
cycle Hringur í gegnum hringekjuhlutina frá vinstri til hægri.
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).
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.carouselatburð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. Fer aftur til þess sem hringir áður en markatriðið hefur verið sýnt .
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.carouselatburðurinn á sér stað).
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.carouselatburðurinn á sér stað).

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
slid.bs.carousel Kveikt þegar hringekjan hefur lokið rennibrautinni.
slide.bs.carousel Kveikir strax þegar slidetilviksaðferðin er beitt. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})