Ejupi contenido principal-pe Eike docs jeguatahápe
Check
in English

Carrusel rehegua

Peteĩ componente diapositiva jehechaukarã ojeguata hag̃ua ciclo umi elemento rupive —taꞌãngamýi térã diapositiva jehaipyre rehegua— peteĩ carrusel-icha.

Ko páhinape

Mba’éichapa omba’apo

Pe carrusel haꞌehína peteĩ taꞌãngamýi jehechaukarã ojeguata hag̃ua ciclo-pe peteĩ serie contenido rupive, oñemopuꞌavaꞌekue CSS 3D ñembohasa ha peteĩ JavaScript michĩmi reheve. Ombaꞌapo peteĩ serie taꞌãngamýi, jehaipyre térã marcado personalizado reheve. Avei oike ipype pytyvõ umi control ha indicador mboyvegua/oúvape g̃uarã.

Umi kundahárape oñepytyvõhápe API Visibilidad Página rehegua , carrusel ndojedeslizamoꞌãi jave página web ndojehecháiramo puruhárape (haꞌeháicha kundahára vore ndojejapói jave, kundahára ventána oñemboguejýramo, ha mbaꞌe).

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

Eikuaa porãke umi carrusel anidado ndojeguerohorýiha, ha umi carrusel generalmente noñemoañetéi umi norma accesibilidad rehegua.

Tembiecharã

Umi carrusel ndonormalisái ijeheguiete umi dimensión diapositiva rehegua. Upéicha rupi, ikatu tekotevẽ reipuru ambue mba’ekuaarã térã estilo jeporupyre rembotuichave hag̃ua hekopete contenido. Umi carrusel oipytyvõ ramo jepe umi control ha indicador mboyvegua/oúva, noñeikotevẽi explícitamente. Emoĩ ha emohenda rehechávo iporãha.

Pe .activeclase tekoteve oñembojoapy petetva umi diapositiva rehe ndaupéichairamo ndojehechamo ai pe carrusel. Avei katuete emohenda peteĩ ijojaha’ỹva idpe .carouselumi control opcional-pe g̃uarã, ko’ýte reiporúramo heta carrusel peteĩ páhinape. Umi elemento control ha indicador rehegua oguerekovaꞌerã peteĩ data-bs-targetatributo (térã hrefenlace-kuérape g̃uarã) ojoajúva idpe .carouselelemento rehegua ndive.

Diapositivas añoite

Ko'ápe oî peteî carrusel orekóva diapositivas añoite. Eñatendéke oĩha .d-blockha .w-100carrusel taꞌãngamýi ári ani hag̃ua kundahára taꞌãngamýi alineación por defecto.

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

Umi control reheve

Oñemoĩvo umi control mboyve ha oúvape. Ro’e porã reipuru hag̃ua <button>elementokuéra, ha katu ikatu avei reipuru <a>elementokuéra role="button".

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

Umi indicador reheve

Ikatu avei emoĩ umi indicador carrusel-pe, umi control ykére, avei.

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

Umi leyenda reheve

Emoĩ ñe’ẽñemi nde diapositivakuérape ndahasýiva .carousel-captionelemento reheve oimeraẽva ryepýpe .carousel-item. Ikatu oñeñomi pyaꞌe umi jehechaukaha michĩvévape, ojehechaukaháicha iguýpe, umi tembipuru jehechaukarã opcional reheve . Ñañomi iñepyrũrãme ndive .d-noneha jagueru jey umi tembipuru mediano-pe .d-md-block.

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

Emoĩ .carousel-fadende carrusel-pe emoingove hag̃ua umi diapositiva peteĩ transición descoloramiento reheve peteĩ diapositiva rangue. Ojesarekóva nde carrusel contenido rehe (techapyrã, diapositiva jehaipyre añoite), ikatu emoĩse .bg-bodytérã peteĩ CSS jeporupyre .carousel-items-pe ojejapo hag̃ua crossfading hekopete.

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

Oñemoĩ data-bs-interval=""peteĩ .carousel-item-pe oñemoambue hag̃ua mboy tiémpopa oñembotapykue hag̃ua ojeguata hag̃ua automáticamente ciclismo-pe ambue mbaꞌeme.

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

Embogue pe deslizamiento táctil rehegua

Umi carrusel oipytyvõ ojedesliza haĝua izquierda/derecha umi dispositivo pantalla táctil-pe oñemomýi hag̃ua umi diapositiva apytépe. Kóva ikatu oñembogue ojeporúvo data-bs-touchatributo. Pe techapyrã oĩva iguýpe avei ndoikéiva data-bs-rideatributo ani hag̃ua oñembopu ijehegui.

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

Emoĩve .carousel-darkpe .carouselumi control, indicador ha leyenda iñypytũvévape g̃uarã. Umi control oñembojere iñemyenyhẽ morotĩ por defecto-gui filterCSS mbaꞌekuaarã reheve. Umi ñe’ẽñemi ha control oguereko Sass mba’ekuaarã ambuéva ombohekopyréva colorha background-color.

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

Pe transición duración de .carousel-itemikatu oñemoambue $carousel-transition-durationSass mbaꞌekuaarã ndive oñembohysýi mboyve térã estilo jeporupyre oipurúramo CSS oñembohekopyréva. Ojeporúramo heta jehaipyre, eñangareko oñemboheko raẽ hag̃ua ñembohasa ñembohasa (techapyrã transition: transform 2s ease, opacity .5s ease-out).

Sass rehegua

Variables rehegua

Variables opaite carrusel-pe g̃uarã:

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

Variables carrusel iñypytũvape g̃uarã : .

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

Jeporu rehegua

Umi atributo de datos rupive

Eipuru umi atributo dato rehegua econtrola hagua fácilmente carrusel ñemohenda. data-bs-slideomoneĩ umi ñeꞌepykuaa prevtérã next, omoambuéva diapositiva ñemohenda oñemohenda hag̃ua koꞌag̃agua rehe. Ikatu avei, eipuru data-bs-slide-toembohasa hagua petet índice diapositiva cruda carrusel-pe data-bs-slide-to="2", ombohasáva diapositiva ñemohenda petet índice particularpe oñepyrüva 0.

Pe data-bs-ride="carousel"atributo ojepuru oñemarka hag̃ua peteĩ carrusel animador ramo oñepyrũvo página carga-pe. Ndereiporúiramo data-bs-ride="carousel"remoñepyrũ hag̃ua nde carrusel, ndete voi remoñepyrũvaʼerã. Ndaikatúi ojepuru oñembojoajúvo (redundante ha natekotevẽiva) JavaScript ñepyrũ hesakãva peteĩ carrusel rehe.

JavaScript rupive

Ohenói carrusel manualmente orekóva:

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

Opciones rehegua

Umi opción ikatuháicha oñembohasa atributo de datos térã JavaScript rupive, ikatu emoĩ peteĩ opción réra data-bs-, -peguáicha data-bs-animation="{value}". Ejesareko emoambue hag̃ua káso tipo opción réra “ camelCase ”-gui “ kebab-case ”-pe embohasávo umi opción atributo de datos rupive. Por ehémplo, eipuru data-bs-custom-class="beautifier"rangue data-bs-customClass="beautifier".

Bootstrap 5.2.0 guive, opaite componente oipytyvõ peteĩ atributo dato reservado experimentaldata-bs-config ikatúva oñemohenda componente configuración simple peteĩ cadena JSON ramo. Peteĩ elemento oguerekóramo data-bs-config='{"delay":0, "title":123}'ha data-bs-title="456"atributo, pe valor paha titlehaꞌeta 456ha umi atributo dato rehegua añónte omboykéta umi valor oñemeꞌevaꞌekue data-bs-config. Avei, umi atributo dato rehegua oĩmava ikatu oguereko JSON mbaꞌekuaarã data-bs-delay='{"show":0,"hide":150}'.

Téra Hesegua Upevakuére Techaukaha
interval papapy 5000 Pe tiempo oñembotapykue hag̃ua ojeguata hag̃ua automáticamente peteĩ mbaꞌere.
keyboard booleano rehegua true Pe carrusel orreaccionava’erãpa umi acontecimiento teclado rehegua.
pause cadena, booleano rehegua "hover" Oñemohenda ramo "hover", omombyky carrusel ciclo rehegua mouseenterha omoñepyrũ jey carrusel ciclo rehegua mouseleave. Oñemohenda ramo false, ojepyso carrusel ári ndopytu'umo'ãi. Umi tembipuru oñembohapéva táctil-pe, oñemboguapy jave "hover", ciclismo ojepytuꞌuvaꞌerã touchend(ojeporúvo omohuꞌa rire oñembojoaju carrusel ndive) mokõi intervalo aja, oñepyrũ jey mboyve ijeheguiete. Kóva oñembojoapy mouse reko rehe.
ride cadena, booleano rehegua false Oñemohenda ramo true, ombopu ijehegui carrusel puruhára ombojere rire manualmente peteĩha mbaꞌe. Oñemohenda ramo "carousel", ombopu ijehegui carrusel carga-pe.
touch booleano rehegua true Pe carrusel oipytyvõva’erãpa umi interacción deslizamiento izquierda/derecha rehegua umi dispositivo pantalla táctil-pe.
wrap booleano rehegua true Taha'e carrusel ociclava'erã continuamente térã oreko parada duro.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua .

Ikatu ejapo peteĩ instancia carrusel rehegua constructor carrusel rehegua ndive, techapyrãramo, emoñepyrũ hag̃ua opción adicional reheve ha eñepyrũ hag̃ua ciclo umi elemento rupive:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Tapereko Techaukaha
cycle Ojapo ciclo umi mba e carrusel rehegua rupive izquierda guive derecha peve.
dispose Ombyai petet elemento carrusel. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)
getInstance Método estático ohejáva ndéve rehupyty instancia carrusel ojoajúva peteĩ elemento DOM rehe, ikatu reipuru péicha: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Método estático ombojevýva peteĩ instancia carrusel ojoajúva peteĩ elemento DOM rehe térã omoheñói peteĩ pyahu en caso noñemoñepyrũi. Ikatu reiporu péicha: bootstrap.Carousel.getOrCreateInstance(element).
next Ombojere pe mba’e oúvape. Ojevy ohenóivape ojehechauka mboyve mbaꞌe oúva (techapyrã, oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).
nextWhenVisible Ani recicla carrusel ambue gotyo ndojehechái jave página térã ndojehechái jave carrusel térã ituva. Ojevy ohenóivape ojehechauka mboyve mbaꞌe ojehekahápe .
pause Ojoko carrusel ani haguã ohóva bicicleta rehe umi artículo rupive.
prev Ombohasa ciclo pe elemento ohasava’ekuépe. Ojevy ohenóivape ojehechauka mboyve mbaꞌe mboyvegua (techapyrã, oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).
to Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe). Ojevy ohenóivape ojehechauka mboyve mbaꞌe ojehekahápe (techapyrã, oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).

Umi mba’e oikóva

Bootstrap clase carrusel oikuaauka mokõi evento ojeengancha haguã funcionalidad carrusel-pe. Mokõive mba’e ojehúva oguereko ko’ã mba’ekuaarã ambuéva:

  • direction: Pe dirección ojedeslizahápe carrusel (tahaꞌe "left"térã "right").
  • relatedTarget: Pe elemento DOM oñembohasáva hína hendaitépe pe elemento activo ramo.
  • from: Pe índice oguerekóva pe mba’e ko’áĝagua
  • to: Pe índice pe mba’e oúva rehegua

Opaite mba’e ojehúva carrusel-pe ojedispara carrusel-pe voi (he’iséva pe <div class="carousel">).

Tipo de evento rehegua Techaukaha
slid.bs.carousel Ojedispara carrusel omohu'ãvo itransición diapositiva.
slide.bs.carousel Ombogue pyaꞌe oñehenói jave slidemétodo instancia rehegua. 
const myCarousel = document.getElementById('myCarousel')

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