Saltar al contenido principal Salta a docs navegación
Check
in English

Carrusel

Huk diapositiva rikuchiy componente elementokuna chawpipi ciclopaq —imaynakuna utaq qillqasqapa diapositivakuna— huk carrusel hina.

Kay p'anqapi

Imayna llamkan

Carrusel huk diapositiva rikuchiy huk serie contenido kaqpi ciclo kaqpaq, CSS 3D tikraykunawan ruwasqa chaymanta huk chhika JavaScript kaqwan ruwasqa. Huk qatiq siq'ikunawan, qillqawan utaq sapanchasqa markawan llamk'an. Hinallataqmi yanapakuy ñawpaq/qhipa kamachiykunapaq chaymanta rikuchiqkunata churan.

Navegadorkunapi maypichus API P'anqa Rikuna yanapasqa kachkan, carrusel mana llimp'inqachu mayk'aq web kiti mana ruwaqpaq rikukunchu (kayhina mayk'aq maskaq ñiqi mana llamk'achkanchu, maskaqpa ventananta pisiyachisqa, wakkuna).

Kay componentepa animación efectonqa prefers-reduced-motionmedios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway .

Ama hina kaspa, yachay anidado carruselkuna mana yanapasqachu, chaymanta carruselkuna generalmente mana haykuy kamachiykunawan hunt'asqachu.

Qatina

Carruselkunaqa manam kikillanmantachu diapositivapa dimensionninkunata normalizanku. Chayhina, yapa yanapakuykunata utaq sapanchasqa estilokuna llamk'achiyta necesitankiman allinta contenidota sayachinaykipaq. Carruselkuna ñawpaq/qhipa kamachiykunata chaymanta rikuchiqkunata yanapaptinkupas, mana sut'imantachu mañasqa kanku. Yanapay hinaspa ruway munasqaykiman hina.

Clase nisqa .activehuknin diapositivaman yapakunan mana chayqa carrusel mana rikukunqachu. Hinallataq huk sapalla idkaqpi churayta .carouselchaymanta akllana kamachiykunapaq, aswanta sichus achka carruselkuna huk p'anqapi llamk'achkanki. Control chaymanta rikuchiq elementokuna huk data-bs-targetatributoyuq kananku tiyan (utaq hreft'inkikuna kaqpaq) chaymanta idelementomanta .carouseltupan.

Diapositivas solamente

Kaypi huk carrusel con diapositivas solamente. Reparay .d-blockchaymanta .w-100carrusel siq'ikunapi kayninta maskaqpa ñawpaqmanta siq'i chiqanchayta harkananpaq.

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

Controles nisqawan

Ñawpaq chaymanta qatiq kamachiykunapi yapay. Elementokunata llamk'achiyta yuyaychayku , ichataq elementokunatapas <button>llamk'achiyta atinki .<a>role="button"

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

Indicadores nisqawan

Hinallataq, carruselman rikuchiqkunata yapayta atinki, controlkunap ladunpi, chaymanta.

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

Con capciones

Diapositivaykikunaman qillqakunata yapay mana sasachakuspa .carousel-captionmayqin ukhupi kaq elementowan .carousel-item. Aswan huch'uy qhawanakunapi mana sasachu pakasqa kankuman, uraypi rikuchisqa hina, akllana qhaway yanapakuykunawan . Qallariypi pakayku kaywan .d-nonechaymanta kutichimuyku chawpi sayayniyuq dispositivokunapi kaqwan .d-md-block.

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

Carruselniykiman yapay .carousel-fadediapositivakunata huk diapositivapa rantinpi huk descoloramiento transiciónwan kawsachinaykipaq. Carruselpa imayna kananmanta (kayhina, qillqalla diapositivakuna), yapayta .bg-bodyutaq wakin ruwasqa CSS .carousel-items kaqman allin crossfading kaqpaq munankiman.

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

data-bs-interval=""Huk kaqman yapay .carousel-itemmayk'a pachata tardanapaq tikranapaq kikillanmanta bicicletapi puriymanta qatiq kaqman.

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

Desactivar deslizamiento de tocar

Carruselkuna pantalla llachpana dispositivokunapi lluq'i/alliq llalliyta yanapan diapositivakunapura kuyuypaq. data-bs-touchKayqa atributo nisqawanmi mana llamk'achisqa kanman . Uraypi kaq ejemplopas mana data-bs-rideatributota churanchu chayrayku mana autoplaychu.

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

Variante oscura

Aswan yana controlkuna, rikuchiqkuna, chaymanta capciones kaqpaq .carousel-darkchayman yapay . .carouselKamachiykuna ñawpaqmanta yuraq hunt'ayninmanta filterCSS kaqwan tikrasqa kanku. Capciones chaymanta controles huk Sass variables yapasqayuq kanku chaymanta colorchaymanta background-color.

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

Transición costumbre nisqa

Kay tikray unayniyuq .carousel-itemkay Sass tikraqwan manaraq huñuchkaspa utaq sapanchasqa estilokunawan tikrasqa kanman $carousel-transition-durationsichus huñusqa CSS kaqwan llamk'achkanki. Achka tikraykunata churaptinkuqa, tikray tikray ñawpaqta riqsichisqa kananpaq qhaway (kayhina transition: transform 2s ease, opacity .5s ease-out).

Sass

Variables nisqakuna

Tukuy carruselkunapaq variables nisqakuna:

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

Yana carruselpaq variables nisqakuna :

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

Uso

Atributos de datos nisqawan

Atributos de datos nisqawan yanapachikuy carruselpa maypi kayninta mana sasachakuspalla kamachinaykipaq. data-bs-slidellalliq simikunata chaskikun prevutaq next, chaymi diapositivapa kayninta kunan kasqanman hina tikran. Hukninpiqa, data-bs-slide-tohuk raw diapositiva indiceta carruselman pasananpaq llamk'achiy data-bs-slide-to="2", chaymi diapositivapa kayninta huk indice particularman tikran ,wan qallarispa 0.

Atributo data-bs-ride="carousel"nisqaqa huk carrusel nisqa p'anqa kargamanta qallarispa kawsachiq hina markanapaqmi llamk'achisqa. Sichus mana data-bs-ride="carousel"carruselniyki qallariypaq llamk'achkankichu, qam kikiyki qallarichinayki tiyan. Mana llamk'achiy atikunmanchu (redundante chaymanta mana necesario) sut'i JavaScript qallariywan kikin carrusel kaqwan kuskachasqa.

JavaScript nisqawan

Llama a carrusel manualmente con:

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

Akllanakuna

Imaynachus akllanakuna willay layakuna utaq JavaScript kaqninta pasayta atikun, huk akllana sutita yapayta atikunki kayman data-bs-, imaynachus data-bs-animation="{value}". Aseguray akllana sutimanta caso laya “ camelCase ” kaqmanta “ kebab-case ” kaqman tikrayta mayk’aq akllanakunata atributos de datos kaqninta pasaspa. Ejemplopaq data-bs-custom-class="beautifier", data-bs-customClass="beautifier".

Bootstrap 5.2.0 kaqmanta, llapa componentakuna huk experimental waqaychasqa willay laya yanapakuyta yanapakunku data-bs-configmayqinchus JSON watiqa hina sanu componente ruwayta wasichayta atin. Huk elemento data-bs-config='{"delay":0, "title":123}'chaymanta data-bs-title="456"layakunayuq kaqtin, qhipa titlechanin kanqa 456chaymanta sapaq willay layakuna qusqa chanikunata llallichinqa data-bs-config. Chaymanta, kunan kaq willay layakuna JSON chanikunata wasichayta atinku kayhina data-bs-delay='{"show":0,"hide":150}'.

Suti Niraq Ñawpaqchasqa Willay
interval yupay 5000 Huk imapas kikillanmanta bicicletapi purichiymanta hayk'a pacha tardanapaq.
keyboard boolean nisqa true Sichus carrusel tecladopi sucedesqanwan reaccionananchu icha manachu.
pause q’aytu, boolean "hover" Sichus churasqa kachkan "hover", carruselpa bicicletapi puriyninta sayachin mouseenterhinaspa carruselpa bicicletapi puriyninta yapamanta qallarichin mouseleave. , nisqapi churasqa kaptinqa false, carruselpa hawanpi kuyurispaqa manam samachinqachu. Llachpanapaq atichisqa dispositivokunapi, , kaqpi churasqa kaqtin "hover", bicicletapi puriyqa sayanqa touchend(huk kuti llamk'achiq carruselwan tinkiyta tukusqa) iskay chawpi pachapaq, manaraq kikillanmanta wakmanta qallarichkaptin. Kayqa siwipa ruwayninmanta yapasqa.
ride q’aytu, boolean false Sichus churasqa true, carruselta kikinmanta pukllan chaymanta llamk'achiq makiwan ñawpaq kaq imata muyuchisqanmanta. Sichus churasqa "carousel", autoplay carrusel cargapi.
touch boolean nisqa true Sichus carrusel yanapanan tiyan lluq'i/alliq swipe interacciones pantalla táctil dispositivokunapi.
wrap boolean nisqa true Carrusel sapa kutilla bicicletapi purinan icha sinchi sayayniyuq kanan icha manachu.

Métodos

Métodos y transiciones asíncronas

Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .

Aswan willakuypaq JavaScript qillqaykuta qhaway .

Carrusel ruwaqwan huk carrusel instanciata ruwayta atikunki, kayhina, yapasqa akllanakunawan qallariypaq chaymanta imakuna chawpipi ciclota qallariypaq:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Imayna Willay
cycle Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin.
dispose Huk elementopa carruselnintam chinkachin. (DOM elementopi waqaychasqa willayta hurqun)
getInstance Método estático mayqinchus huk DOM elementowan tinkisqa carrusel instanciata jap'iyta atikun, kayhinata llamk'achiy atikunki: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Método estático mayqinchus huk DOM elementowan tinkisqa carrusel instanciata kutichin utaq musuq ruwan mana qallarisqa kaqtin. Chaytaqa kayhinatam servichikuwaq: bootstrap.Carousel.getOrCreateInstance(element).
next Qatiqnin kaqman ciclokuna. Llamaqman kutimun manaraq qatiq imapas rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carouselruway ruwakuchkaptin).
nextWhenVisible Ama bicicletapi carruselta qatiqninman puriychu, p'anqa mana rikukuptin utaq carrusel utaq tayta-maman mana rikukuptin. Manaraq ima munasqa rikuchisqa kachkaptin waqyaqman kutin .
pause Carruselta imakuna chawpinta bicicletapi purinanta harkan.
prev Ñawpaq kaq kaqman muyurin. Llamaqman kutimun manaraq ñawpaq kaq rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carouselruway ruwakuchkaptin).
to Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq). Llamaqman kutimun manaraq imachus munasqa rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carouselruway ruwakuchkaptin).

Eventos nisqakuna

Bootstrap kaqpa carrusel clase iskay ruwaykunata rikuchin carrusel ruwanaman enganche kaqpaq. Iskaynin ruwaykuna kay yapasqa propiedadesniyuq kanku:

  • direction: Carrusel maymanchus llimp’isqan (yaqapas "left"utaq "right").
  • relatedTarget: DOM elemento mayqinchus llamk'aq elemento hina maychus kananman llimp'isqa kachkan.
  • from: Kunan kaq imayaypa indice nisqa
  • to: Qatiqninpi kaqpa indice nisqa

Llapan carrusel ruwaykuna kikin carruselpi (ichataq chay <div class="carousel">).

Tipo de evento Willay
slid.bs.carousel Carrusel diapositiva transicionninta tukuptinqa disparasqa.
slide.bs.carousel slideInstancia método waqyasqa kaqtin chaylla rawrarin. 
const myCarousel = document.getElementById('myCarousel')

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