Carousel

A slideshow component ut revolutio per elementa-imagines vel labitur textus - sicut carousel.

In hac pagina

Quomodo facitur

Carousel est slideshow pro cycling per seriem contentorum, constructum cum CSS 3D transformat et frenum JavaScript. Cum imaginum serie, textu, vel usu notae laborat. Etiam subsidia includunt per regulas proximas et indices priorum/posterum.

In navigatoribus ubi visibilitas API sustentatur, carousel illapsum vitabit cum pagina telaris usoris non apparet (ut cum tab navigatio iners est, fenestra navigatrum elevat, etc.).

Effectus animationis huius componentis dependet ex prefers-reduced-motioninterrogatione instrumentorum. Videre motum sectionem accessibilitatis nostrae documentationis reductam .

Quaeso scias quod carousellae nidificantes non sustinentur, et carousels plerumque non obtemperant signis accessibilitatis.

Exemplum

Carousels non automatice slide dimensionibus normalize. Quale, necesse est uti adiectis utilitatibus vel stylis consuetudinibus ad convenientes amplitudines contentis. Dum carousels sustinent praecedens / proximas potestates et indices, non explicite requiritur. Adde et mos ut tibi videbitur.

Classes .activeadiciendas uni e labiis aliter carousel visibiles non erunt. Etiam scito singularem idin .carouselimperationibus ad libitum constituere, praesertim si pluribus carousellis in una pagina uteris. Imperium et indicator elementa debent habere data-bs-targetattributum (vel pro nexus) quod hrefcongruit elementi.id.carousel

Labitur nisi

Lorem carousel cum labitur solum. Nota praesentiam .d-blocket .w-100imagines carousel ne pasco alignment imaginem defaltam.

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>

Cum controls

addens in praecedente et sequenti regens. Elementa utendo commendamus , sed elementa <button>quoque uti potes .<a>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>

Cum indicibus

Indices ad carousel etiam addere potes, e regione moderaminum etiam.

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>

Cum captions

Captiones ad tuas facile labitur cum .carousel-captionelemento in aliquo .carousel-item. Facile abscondi possunt in minori prospectu, ut infra patebit, utilitates ad libitum ostensionis . Eos initio occultamus .d-noneet reducimus ad machinas mediocres cum .d-md-block.

Primum slide label

Quidam repraesentativus placeholder contentum primo lapsu.

Secundus slide label

Aliqua repraesentativa placeholder contentum pro secundo lapsu.

Tertius slide label

Quidam repraesentativus placeholder contentus pro tertia slide.

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

Adde .carousel-fadead carousel tuum ad animandum labitur cum fade transitus loco lapsus. Fretus in contento carousel tuo (exempli gratia textus tantum labitur), fortasse vis addere .bg-bodyvel consuetudinem aliquam CSS ad .carousel-items ad proprium transitum.

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>

Singula `.carousel-item`intervalla

Adde data-bs-interval=""ad .carousel-itemmutare spatium morae inter sponte cyclica ad proximum item.

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>

Inactivare tactus swiping

Carousels support swiping left/right in touchscreen machinis quae movere inter labitur. Debilitari hoc potest utendo data-bs-touchattributo. Exemplum infra etiam attributum non includit data-bs-rideunde autoplay non.

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>

Dark variant

Adde obscuriores .carousel-darkregulas .carousel, indices et captiones. Moderationes inversae sunt ex defectu albo satietatem cum filterpossessionibus CSS. Captiones et controllatae variabiles Sass additionales habent quae customize et colorac background-color.

Primum slide label

Quidam repraesentativus placeholder contentum primo lapsu.

Secundus slide label

Aliqua repraesentativa placeholder contentum pro secundo lapsu.

Tertius slide label

Quidam repraesentativus placeholder contentus pro tertia slide.

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>

Custom Transitus

Transitus durationis rerum .carousel-itemmutari potest cum $carousel-transition-durationSass variabilis antequam stilos componant vel morem adhibeas si CSS compilata es. Si plures transitiones applicantur, fac prius definiatur transitus transformationis (eg transition: transform 2s ease, opacity .5s ease-out.).

Sass

Variabilium

Variabiles omnes carousels:

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

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

Consuetudinem

Via data attributa

Usus notitia attribuit facilem positionem carousel moderari. keywords vel data-bs-slideacceptat , quae situm lapsus mutat respectu eius positionis currentis. Vel , utere ut index lapsus crudum ad carousel transire , quod positio lapsus transfert ad indicem particularem incipientem .prevnextdata-bs-slide-todata-bs-slide-to="2"0

Proprium data-bs-ride="carousel"carousel notare adhibetur ut in onere paginae incipiens animans. data-bs-ride="carousel"Si carousel tuum initialize non uteris , hoc ipsum habes ut initializes. In compositione cum (superfluis et superfluis) adhiberi non potest expressa JavaScript initialization eiusdem carousel.

Via JavaScript

Manually vocate carousel est:

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

Optiones

Cum optiones transeantur per data attributa vel JavaScript, potes appendere nomen optionis data-bs-, ut in data-bs-animation="{value}". Fac mutare casus genus optionis nominis ab " camelCase " ad " kebab-casum " cum transeundo optiones per data attributa. Exempli gratia data-bs-custom-class="beautifier"loco data-bs-customClass="beautifier".

Sicut de Bootstrap 5.2.0, omnia membra experimentalem datam reservatam sustinent data-bs-configquae figuram simplicem componentem sicut chorda JSON domum habere potest. Cum elementum habet data-bs-config='{"delay":0, "title":123}'et data-bs-title="456"attributa, valor finalis titleerit 456et attributa separata data valores supra datos vincent data-bs-config. Praeterea exsistentes notitiae attributae possunt domum JSON valores similes data-bs-delay='{"show":0,"hide":150}'.

Nomen	Type	Default	Descriptio
`interval`	numerus	`5000`	Moles temporis inter morandi automatice revolutio item.
`keyboard`	Boolean	`true`	Utrum carousel agere debet claviaturae eventus.
`pause`	filum, boolean	`"hover"`	Si `"hover"`adposita, cyclum carousel insistit `mouseenter`et cyclum carousel in resumit `mouseleave`. Si paro `false`, super carousel non morabitur. De machinis tactus parabilibus, cum addictis `"hover"`, revolutio `touchend`in duobus intervallis intersessis (semel utentis cum carousel finito) morabitur, antequam sponte resumatur. Hoc est praeter murem morum.
`ride`	filum, boolean	`false`	Si pone ad `true`, autoplays carousel post manually cyclum primum item. Si pone `"carousel"`, autoplays carousel onus.
`touch`	Boolean	`true`	Utrum carousel sustineat sinistram / ius swipe interactiones in touchscreen machinis.
`wrap`	Boolean	`true`	Utrum carousel debet continue cyclum vel duras clausuras habere.

Methodi

Modi asynchronous et transitus

Omnes API modi asynchroni sunt et transitus committitur . Redeunt ad RECENS mox ut transitus incipiat sed antequam finiatur . Methodus praeterea in transitus transeuntis ignorabitur .

See our JavaScript documentation for more information .

Instantia carousel cum constructore carousel creare potes, exempli gratia, cum optionibus additis initialize et per res cyclicas committitur:

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

Methodus	Descriptio
`cycle`	Cycles per carousel res a sinistra in dextram.
`dispose`	Carousel elementum destruit. (Recondita removet data in dom elementum)
`getInstance`	Ratio static, quae te permittit ut instantia carousel ad elementum dom coniungitur, eo uti potes: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Modus staticus, qui redit instantia carousel elemento dom adiuncto vel novum creans in casu non initialized. Hoc uti potes: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Cycli ad proximum item. RECENS REcurrit ante proximum item ostensum est (eg, antequam `slid.bs.carousel`res evenit).
`nextWhenVisible`	Noli cyclum carousel proximum facere cum pagina non visibilis vel carousel vel parens eius non apparet. Recurrit ad RECENS ante scopo item ostensum est .
`pause`	Sistit a revolutio per items carousel.
`prev`	Cycli ad priorem item. RECENS REcurrit antequam priorem item ostensam est (eg, antequam `slid.bs.carousel`res evenit).
`to`	Cycles carousel ad figmentum particulare (0 fundatum, similis ordinationi). RECENS REcurrit ante scopum item ostensum est (exempli gratia antequam `slid.bs.carousel`res incidit).

Events

Classis carousel Bootstrap duos eventus exponit pro hamo in carousel functionality. Utraque certe proprietates sequentes adiectis habent;

directionDirectio in qua carousel est inclinatus (vel "left"vel "right").
relatedTarget: dom elementum quod est lapsus in locum activum item.
from: Index hodiernae item
to: Index sequentis item

Omnes eventus carousel accenduntur ad ipsum carousel (i. e. ad <div class="carousel">).

Genus res	Descriptio
`slid.bs.carousel`	Accensus cum carousel lapsu transitum explevit.
`slide.bs.carousel`	Ignes statim cum `slide`instantia methodus invocatur.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

Quomodo facitur

Exemplum

Labitur nisi

Cum controls

Cum indicibus

Cum captions

Primum slide label

Secundus slide label

Tertius slide label

Crossfade

Singula .carousel-itemintervalla

Inactivare tactus swiping

Dark variant

Primum slide label

Secundus slide label

Tertius slide label

Custom Transitus

Sass

Variabilium

Consuetudinem

Via data attributa

Via JavaScript

Optiones

Methodi

Modi asynchronous et transitus

Events

Singula `.carousel-item`intervalla