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.

Peteĩha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua peteĩha diapositiva-pe g̃uarã.

Mokõiha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua mokõiha diapositiva-pe g̃uarã.

Mbohapyha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua mbohapyha diapositiva-pe g̃uarã.

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>

`.carousel-item`Intervalo individual rehegua

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.

Peteĩha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua peteĩha diapositiva-pe g̃uarã.

Mokõiha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua mokõiha diapositiva-pe g̃uarã.

Mbohapyha etiqueta diapositiva rehegua

Oĩ contenido representativo tenda rehegua mbohapyha diapositiva-pe g̃uarã.

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 `mouseenter`ha 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.carousel`mbaꞌ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.carousel`mbaꞌ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.carousel`mbaꞌ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 `slide`método instancia rehegua.

const myCarousel = document.getElementById('myCarousel')

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

Carrusel rehegua

Mba’éichapa omba’apo

Tembiecharã

Diapositivas añoite

Umi control reheve

Umi indicador reheve

Umi leyenda reheve

Peteĩha etiqueta diapositiva rehegua

Mokõiha etiqueta diapositiva rehegua

Mbohapyha etiqueta diapositiva rehegua

Crossfade rehegua

.carousel-itemIntervalo individual rehegua

Embogue pe deslizamiento táctil rehegua

Variante oscura rehegua

Peteĩha etiqueta diapositiva rehegua

Mokõiha etiqueta diapositiva rehegua

Mbohapyha etiqueta diapositiva rehegua

Transición personalizada rehegua

Sass rehegua

Variables rehegua

Jeporu rehegua

Umi atributo de datos rupive

JavaScript rupive

Opciones rehegua

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Umi mba’e oikóva

`.carousel-item`Intervalo individual rehegua