Karuselli

Diaesityskomponentti, jolla voi kiertää elementtejä – kuvia tai tekstidioja – kuten karuselli.

Tällä sivulla

Kuinka se toimii

Karuselli on diaesitys sisältösarjan läpi pyöräilemiseen, ja se on rakennettu CSS 3D -muunnoksilla ja hieman JavaScriptillä. Se toimii kuvasarjan, tekstin tai mukautetun merkinnän kanssa. Se sisältää myös tuen edellisille/seuraaville säätimille ja ilmaisimille.

Selaimissa, joissa sivun näkyvyyden sovellusliittymää tuetaan, karuselli välttää liukumista, kun verkkosivu ei ole käyttäjälle näkyvissä (kuten kun selaimen välilehti ei ole aktiivinen, selainikkuna on pienennetty jne.).

Tämän komponentin animaatiovaikutus riippuu prefers-reduced-motionmediakyselystä. Katso esteettömyysdokumentaation osio liikkeen vähentämisestä .

Huomaa, että sisäkkäisiä karuselleja ei tueta, eivätkä karusellit yleensä ole esteettömyysstandardien mukaisia.

Esimerkki

Karusellit eivät normalisoi diojen mittoja automaattisesti. Sellaisenaan saatat joutua käyttämään lisäapuohjelmia tai mukautettuja tyylejä sisällön sopivan koon mitoittamiseksi. Vaikka karusellit tukevat edellisiä/seuraavia säätimiä ja ilmaisimia, niitä ei erikseen vaadita. Lisää ja muokkaa haluamallasi tavalla.

Luokka on .activelisättävä johonkin dioista, muuten karuselli ei näy. Muista myös asettaa yksilöllinen idvalinnaisille .carouselsäätimille, varsinkin jos käytät useita karuselleja yhdellä sivulla. Ohjaus- ja osoitinelementeillä on oltava data-bs-targetattribuutti (tai hreflinkeissä), joka vastaa idelementin attribuuttia .carousel.

Vain dioja

Tässä on karuselli, jossa on vain dioja. .d-blockHuomaa karusellikuvien ja -merkkien läsnäolo .w-100estääksesi selaimen oletuskuvan kohdistuksen.

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>

Ohjainten kanssa

Edellisen ja seuraavan säätimen lisääminen. Suosittelemme <button>elementtien käyttöä, mutta voit myös käyttää <a>elementtejä 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>

Indikaattorien kanssa

Voit myös lisätä ilmaisimia karuselliin ohjaimien rinnalle.

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>

Tekstityksillä

Lisää kuvatekstejä dioihisi helposti minkä .carousel-captiontahansa elementin avulla .carousel-item. Ne voidaan helposti piilottaa pienempiin kuvaportteihin, kuten alla on esitetty, valinnaisten näyttöapuohjelmien avulla . Piilotamme ne aluksi sovelluksella .d-noneja tuomme ne takaisin keskikokoisille laitteille -sovelluksella .d-md-block.

Ensimmäinen dian etiketti

Jotain edustavaa paikkamerkkisisältöä ensimmäiselle dialle.

Toinen dian etiketti

Jotain edustavaa paikkamerkkisisältöä toiselle dialle.

Kolmas dian etiketti

Jotain edustavaa paikkamerkkisisältöä kolmannelle dialle.

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

Lisää .carousel-fadekaruselliisi animoidaksesi dioja häivytyksellä dian sijaan. Karusellin sisällöstä (esim. pelkkää tekstiä sisältävistä dioista) riippuen saatat haluta lisätä .bg-bodytai mukautetun CSS:n .carousel-items:ään oikean ristihäivytyksen varmistamiseksi.

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>

Yksilöllinen `.carousel-item`intervalli

Lisää data-bs-interval=""kohtaan a .carousel-itemmuuttaaksesi ajan, joka kuluu automaattisesti seuraavaan kohteeseen siirtymisen välillä.

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>

Poista kosketuspyyhkäisy käytöstä

Karusellit tukevat pyyhkäisemistä vasemmalle/oikealle kosketusnäytöllisissä laitteissa siirtyäksesi diojen välillä. Tämä voidaan poistaa käytöstä data-bs-touchattribuutilla. Alla oleva esimerkki ei myöskään sisällä data-bs-ridemääritettä, joten se ei toistu automaattisesti.

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>

Tumma variantti

Lisää tummempia säätimiä .carousel-dark, .carouselilmaisimia ja kuvatekstejä. Ohjaimet on käännetty oletusarvoisesta valkoisesta täytteestä filterCSS-ominaisuuden avulla. Tekstityksissä ja säätimissä on ylimääräisiä Sass-muuttujia, jotka mukauttavat colorja background-color.

Ensimmäinen dian etiketti

Jotain edustavaa paikkamerkkisisältöä ensimmäiselle dialle.

Toinen dian etiketti

Jotain edustavaa paikkamerkkisisältöä toiselle dialle.

Kolmas dian etiketti

Jotain edustavaa paikkamerkkisisältöä kolmannelle dialle.

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>

Mukautettu siirtyminen

Siirron kestoa .carousel-itemvoidaan muuttaa $carousel-transition-durationSass-muuttujalla ennen kääntämistä tai mukautetuilla tyyleillä, jos käytät käännettyä CSS:ää. Jos käytetään useita siirtymiä, varmista, että muunnossiirtymä määritellään ensin (esim transition: transform 2s ease, opacity .5s ease-out. ).

Sass

Muuttujat

Muuttujat kaikille karuselleille:

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

Tumman karusellin muuttujat :

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

Käyttö

Tietomääritteiden kautta

Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-bs-slidehyväksyy avainsanat prevtai next, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-bs-slide-tovoit siirtää raakadiaindeksin karuselliin data-bs-slide-to="2", joka siirtää dian sijainnin tiettyyn hakemistoon, joka alkaa merkillä 0.

Attribuuttia data-bs-ride="carousel"käytetään merkitsemään karuselli animaatioksi sivun latauksesta alkaen. Jos et käytä data-bs-ride="carousel"karusellin alustamiseen, sinun on alustettava se itse. Sitä ei voi käyttää yhdessä (redundantin ja tarpeettoman) eksplisiittisen JavaScript-alustuksen kanssa samassa karusellissa.

JavaScriptin kautta

Soita karuselliin manuaalisesti:

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

Vaihtoehdot

Koska valinnat voidaan välittää tietomääritteiden tai JavaScriptin kautta, voit liittää vaihtoehdon nimen kohtaan data-bs-, kuten data-bs-animation="{value}". Varmista, että vaihdat vaihtoehdon nimen tapaustyypin " camelCase " arvoksi " kebab-case ", kun välität valinnat tietomääritteiden kautta. Käytä data-bs-custom-class="beautifier"esimerkiksi data-bs-customClass="beautifier".

Bootstrap 5.2.0:sta lähtien kaikki komponentit tukevat kokeellista varattua dataattribuuttia, data-bs-configjoka voi sisältää yksinkertaisen komponenttimäärityksen JSON-merkkijonona. Kun elementillä on attribuutit data-bs-config='{"delay":0, "title":123}'ja data-bs-title="456", lopullinen titlearvo on 456ja erilliset tietoattribuutit ohittavat annetut arvot data-bs-config. Lisäksi olemassa olevat dataattribuutit voivat sisältää JSON-arvoja, kuten data-bs-delay='{"show":0,"hide":150}'.

Nimi	Tyyppi	Oletus	Kuvaus
`interval`	määrä	`5000`	Aika, joka kestää kohteen automaattisen kierron välillä.
`keyboard`	boolean	`true`	Pitääkö karusellin reagoida näppäimistötapahtumiin.
`pause`	merkkijono, boolen	`"hover"`	Jos asetus on `"hover"`, keskeyttää karusellin pyörimisen `mouseenter`ja jatkaa karusellin pyörimistä `mouseleave`. Jos asetus on `false`, osoittimen siirtäminen karusellin päälle ei keskeytä sitä. Kosketuskäyttöisissä laitteissa, kun asetus on `"hover"`, pyöräily pysähtyy `touchend`(kun käyttäjä on lopettanut vuorovaikutuksen karusellin kanssa) kahdeksi aikaväliksi, ennen kuin pyöräily jatkuu automaattisesti. Tämä on hiiren käytöksen lisäksi.
`ride`	merkkijono, boolen	`false`	Jos asetus on `true`, toistaa karusellin automaattisesti sen jälkeen, kun käyttäjä on valinnut ensimmäisen kohteen manuaalisesti. Jos asetus on `"carousel"`, toistaa karusellin automaattisesti latauksen aikana.
`touch`	boolean	`true`	Tukeeko karuselli vasemmalle/oikealle pyyhkäisyä kosketusnäytöllisissä laitteissa.
`wrap`	boolean	`true`	Pitäisikö karusellin pyöräillä jatkuvasti vai pysähdyksissä.

menetelmät

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

Voit luoda karuselliinstanssin esimerkiksi karusellin rakentajalla, jos haluat alustaa lisävaihtoehdoilla ja alkaa selata kohteita:

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

Menetelmä	Kuvaus
`cycle`	Kiertelee karusellikohteita vasemmalta oikealle.
`dispose`	Tuhoaa elementin karusellin. (Poistaa DOM-elementtiin tallennetut tiedot)
`getInstance`	Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän karuselliinstanssin, voit käyttää sitä seuraavasti: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Staattinen menetelmä, joka palauttaa DOM-elementtiin liitetyn karuselliinstanssin tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Siirtyy seuraavaan kohteeseen. Palaa soittajalle ennen kuin seuraava kohde on näytetty (esim. ennen `slid.bs.carousel`tapahtumaa).
`nextWhenVisible`	Älä siirrä karusellia seuraavaan, kun sivu ei ole näkyvissä tai karuselli tai sen ylätaso ei ole näkyvissä. Palaa soittajalle ennen kuin kohde on näytetty .
`pause`	Estää karusellia pyöräilemästä esineiden läpi.
`prev`	Siirtyy edelliseen kohtaan. Palaa soittajalle ennen kuin edellinen kohde on näytetty (esim. ennen `slid.bs.carousel`tapahtumaa).
`to`	Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko). Palaa soittajalle ennen kuin kohdekohde on näytetty (esim. ennen `slid.bs.carousel`tapahtumaa).

Tapahtumat

Bootstrapin karuselliluokka paljastaa kaksi tapahtumaa, jotka liittyvät karusellitoimintoihin. Molemmilla tapahtumilla on seuraavat lisäominaisuudet:

direction: Suunta, johon karuselli liukuu (joko "left"tai "right").
relatedTarget: DOM-elementti, joka liu'utetaan paikalleen aktiivisena kohteena.
from: Nykyisen kohteen hakemisto
to: Seuraavan kohteen hakemisto

Kaikki karusellitapahtumat laukaistaan itse karuselliin (eli kohtaan <div class="carousel">).

Tapahtumatyyppi	Kuvaus
`slid.bs.carousel`	Käynnistetään, kun karuselli on suorittanut diasiirtymän.
`slide.bs.carousel`	Käynnistyy välittömästi, kun `slide`instanssimenetelmää kutsutaan.

const myCarousel = document.getElementById('myCarousel')

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

Karuselli

Kuinka se toimii

Esimerkki

Vain dioja

Ohjainten kanssa

Indikaattorien kanssa

Tekstityksillä

Ensimmäinen dian etiketti

Toinen dian etiketti

Kolmas dian etiketti

Crossfade

Yksilöllinen .carousel-itemintervalli

Poista kosketuspyyhkäisy käytöstä

Tumma variantti

Ensimmäinen dian etiketti

Toinen dian etiketti

Kolmas dian etiketti

Mukautettu siirtyminen

Sass

Muuttujat

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

Vaihtoehdot

menetelmät

Asynkroniset menetelmät ja siirtymät

Tapahtumat

Yksilöllinen `.carousel-item`intervalli