Karussell

Slaidiseansi komponent elementide (piltide või tekstislaidide) vahel liikumiseks nagu karussell.

Sellel lehel

Kuidas see töötab

Karussell on CSS-i 3D-teisenduste ja natukese JavaScripti abil üles ehitatud slaidiseanss, mis võimaldab liikuda läbi sisusarja. See töötab piltide, teksti või kohandatud märgistusega. See hõlmab ka eelmiste/järgmiste juhtelementide ja indikaatorite tuge.

Brauserites, kus lehe nähtavuse API on toetatud, väldib karussell libisemist, kui veebileht pole kasutajale nähtav (nt kui brauseri vahekaart on passiivne, brauseriaken on minimeeritud jne).

Selle komponendi animatsiooniefekt sõltub prefers-reduced-motionmeediumipäringust. Vaadake meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .

Pange tähele, et pesastatud karusselle ei toetata ja karussellid ei järgi üldiselt juurdepääsetavuse standardeid.

Näide

Karussellid ei normaliseeri automaatselt slaidi mõõtmeid. Seetõttu peate võib-olla kasutama täiendavaid utiliite või kohandatud stiile, et sisu sobivat suurust muuta. Kuigi karussellid toetavad eelmisi/järgmisi juhtelemente ja indikaatoreid, pole need otseselt nõutavad. Lisage ja kohandage oma äranägemise järgi.

Klass .activetuleb lisada ühele slaidile, muidu karusselli ei paista. Samuti määrake valikuliste juhtelementide jaoks kindlasti kordumatu id, .carouseleriti kui kasutate ühel lehel mitut karusselli. Juht- ja indikaatorelementidel peab olema data-bs-targetatribuut (või hreflinkide puhul), mis kattub idelemendi atribuudiga .carousel.

Ainult slaidid

Siin on ainult slaididega karussell. Pange tähele, et karussellikujutistel on tähised .d-blockja .w-100, et vältida brauseri kujutiste vaikejoondamist.

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>

Juhtseadmetega

Eelmise ja järgmise juhtelemendi lisamine. Soovitame kasutada <button>elemente, kuid võite kasutada ka <a>elemente koos 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>

Näitajatega

Lisaks juhtnuppudele saate karussellile lisada ka indikaatoreid.

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>

Koos pealdistega

Lisage oma slaididele hõlpsasti pealdisi .carousel-captionelemendiga mis tahes .carousel-item. Neid saab valikuliste kuvautiliitidega hõlpsasti väiksematesse vaateavadesse peita, nagu allpool näidatud . Peidame need algselt rakendusega .d-noneja toome need tagasi keskmise suurusega seadmetele .d-md-block.

Esimese slaidi silt

Esimese slaidi esinduslik kohatäite sisu.

Teise slaidi silt

Teise slaidi tüüpiline kohatäite sisu.

Kolmas slaidi silt

Kolmanda slaidi esinduslik kohatäite sisu.

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

Lisage .carousel-fadeoma karusselli, et animeerida slaide slaidi asemel tuhmumise üleminekuga. Olenevalt teie karusselli sisust (nt ainult teksti slaidid) võiksite õigeks ristpimendamiseks lisada .bg-bodyvõi mõne kohandatud CSS- i..carousel-item

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>

Individuaalne `.carousel-item`intervall

Lisage data-bs-interval=""a .carousel-item-sse, et muuta aega, mis kulub automaatselt järgmise üksuseni liikumise vahel.

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>

Keela puutega pühkimine

Karussellid toetavad puuteekraaniga seadmetes slaidide vahel liikumiseks vasakule/paremale libistamist. Selle saab data-bs-touchatribuudi abil keelata. Allolev näide ei sisalda samuti data-bs-rideatribuuti, mistõttu seda ei esitata automaatselt.

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>

Tume variant

Tumedamate juhtnuppude, indikaatorite ja tiitrite jaoks lisage .carousel-darksellele . Juhtelemendid on vaikimisi valgest täidisest CSS-i atribuudiga .carouselümber pööratud . filterTiitritel ja juhtelementidel on täiendavad Sassi muutujad, mis kohandavad colorja background-color.

Esimese slaidi silt

Esimese slaidi esinduslik kohatäite sisu.

Teise slaidi silt

Teise slaidi tüüpiline kohatäite sisu.

Kolmas slaidi silt

Kolmanda slaidi esinduslik kohatäite sisu.

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>

Kohandatud üleminek

Ülemineku kestust .carousel-itemsaab muuta $carousel-transition-durationSassi muutujaga enne kompileerimist või kohandatud stiilidega, kui kasutate kompileeritud CSS-i. Kui rakendatakse mitut üleminekut, veenduge, et teisendusüleminek oleks kõigepealt määratletud (nt transition: transform 2s ease, opacity .5s ease-out).

Sass

Muutujad

Kõikide karussellide muutujad:

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

Tumeda karusselli muutujad :

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

Kasutamine

Andmeatribuutide kaudu

Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-bs-slideaktsepteerib märksõnu prevvõi next, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-bs-slide-totöötlemata slaidiindeksi edastamiseks karussellile data-bs-slide-to="2", mis nihutab slaidi positsiooni konkreetsele registrile, mis algab tähega 0.

Atribuuti data-bs-ride="carousel"kasutatakse karusselli märgistamiseks animeerivaks alates lehe laadimisest. Kui te ei kasuta data-bs-ride="carousel"oma karusselli lähtestamiseks, peate selle ise lähtestama. Seda ei saa kasutada koos (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega sama karusselli puhul.

JavaScripti kaudu

Helistage karusselli käsitsi, kasutades:

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

Valikud

Kuna suvandeid saab edastada andmeatribuutide või JavaScripti kaudu, saate valikule lisada valiku nime data-bs-, nagu näiteks data-bs-animation="{value}". Suvandite andmeatribuutide kaudu edastamisel muutke suvandi nime tõuketüüp „ camelCase ” asemel „ kebab-case ”. Näiteks data-bs-custom-class="beautifier"kasutage data-bs-customClass="beautifier".

Alates versioonist Bootstrap 5.2.0 toetavad kõik komponendid eksperimentaalset reserveeritud andmeatribuuti data-bs-config, mis mahutab lihtsa komponendi konfiguratsiooni JSON-stringina. Kui elemendil on atribuudid data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", on lõplik titleväärtus 456ja eraldi andmeatribuudid alistavad väärtused, mis on antud kuupäeval data-bs-config. Lisaks võivad olemasolevad andmeatribuudid sisaldada JSON-i väärtusi, nagu data-bs-delay='{"show":0,"hide":150}'.

Nimi	Tüüp	Vaikimisi	Kirjeldus
`interval`	number	`5000`	Aeg, mis kulub üksuse automaatse tsükli vahel.
`keyboard`	tõeväärtus	`true`	Kas karussell peaks reageerima klaviatuurisündmustele.
`pause`	string, tõeväärtus	`"hover"`	Kui see on seatud `"hover"`, peatab karusselli `mouseenter`tsükli ja jätkab karusselli tsüklit `mouseleave`. Kui see on seatud `false`, ei peata karusselli kohal kursori hõljutamine seda. Puutetundlike seadmete `"hover"`puhul peatub jalgrattasõit `touchend`kaheks intervalliks (kui kasutaja on karusselliga suhtlemise lõpetanud), kui see on seatud väärtusele , enne kui see automaatselt jätkub. See on lisaks hiire käitumisele.
`ride`	string, tõeväärtus	`false`	Kui see on määratud `true`, esitab karussell automaatselt pärast seda, kui kasutaja on esimese üksuse käsitsi tsüklistanud. Kui see on määratud `"carousel"`, esitab karusselli laadimisel automaatselt.
`touch`	tõeväärtus	`true`	Kas karussell peaks toetama puuteekraaniga seadmetes vasakule/paremale pühkimist.
`wrap`	tõeväärtus	`true`	Kas karussell peaks pidevalt tiirlema või peaks olema raskeid peatusi.

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

Saate luua karusselli eksemplari näiteks karussellikonstruktoriga, et lähtestada lisavalikutega ja alustada üksuste vahel liikumist.

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

meetod	Kirjeldus
`cycle`	Liigub läbi karusselli üksuste vasakult paremale.
`dispose`	Hävitab elemendi karusselli. (Eemaldab DOM-elemendile salvestatud andmed)
`getInstance`	Staatiline meetod, mis võimaldab teil saada DOM-i elemendiga seotud karusselli eksemplari, saate seda kasutada järgmiselt: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Staatiline meetod, mis tagastab DOM-i elemendiga seotud karusselli eksemplari või loob uue, kui seda ei lähtestatud. Saate seda kasutada järgmiselt: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Liigub järgmise üksuse juurde. Naaseb helistaja juurde enne, kui järgmine üksus on näidatud (nt enne `slid.bs.carousel`sündmuse toimumist).
`nextWhenVisible`	Ärge liigutage karusselli järgmisele, kui leht pole nähtav või karussell või selle ülem pole nähtav. Naaseb helistaja juurde enne sihtüksuse kuvamist .
`pause`	Peatab karusselli esemete vahel liikumise.
`prev`	Liigub eelmise üksuse juurde. Naaseb helistaja juurde enne eelmise üksuse kuvamist (nt enne `slid.bs.carousel`sündmuse toimumist).
`to`	Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga). Naaseb helistaja juurde enne sihtüksuse kuvamist (nt enne `slid.bs.carousel`sündmuse toimumist).

Sündmused

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks. Mõlemal sündmusel on järgmised lisaomadused:

direction: suund, milles karussell libiseb (kas "left"või "right").
relatedTarget: DOM-element, mis libistatakse aktiivse üksusena oma kohale.
from: praeguse üksuse indeks
to: järgmise üksuse register

Kõik karussellisündmused käivitatakse karusselli enda (st <div class="carousel">) suunas.

Sündmuse tüüp	Kirjeldus
`slid.bs.carousel`	Käivitatakse, kui karussell on slaidi ülemineku lõpetanud.
`slide.bs.carousel`	Käivitub kohe, kui `slide`eksemplari meetod käivitatakse.

const myCarousel = document.getElementById('myCarousel')

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

Karussell

Kuidas see töötab

Näide

Ainult slaidid

Juhtseadmetega

Näitajatega

Koos pealdistega

Esimese slaidi silt

Teise slaidi silt

Kolmas slaidi silt

Crossfade

Individuaalne .carousel-itemintervall

Keela puutega pühkimine

Tume variant

Esimese slaidi silt

Teise slaidi silt

Kolmas slaidi silt

Kohandatud üleminek

Sass

Muutujad

Kasutamine

Andmeatribuutide kaudu

JavaScripti kaudu

Valikud

meetodid

Asünkroonsed meetodid ja üleminekud

Sündmused

Individuaalne `.carousel-item`intervall