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.

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.

Ipahápe, remopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .

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-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.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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".

<div id="carouselExampleControls" class="carousel slide" data-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Umi indicador reheve

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

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Oñemoĩ data-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.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-touchatributo. Pe techapyrã oĩva iguýpe avei ndoikéi data-rideatributo ha oguereko data-interval="false"upéicha ndojapói autoplay.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Jeporu rehegua

Umi atributo de datos rupive

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

Pe data-ride="carousel"atributo ojepuru oñemarka hag̃ua peteĩ carrusel animador ramo oñepyrũvo página carga-pe. Ndereiporúiramo data-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:

$('.carousel').carousel()

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-interval="".

Téra Hesegua Upevakuére Techaukaha
intervalo rehegua papapy 5000 rehegua Pe tiempo oñembotapykue hag̃ua ojeguata hag̃ua automáticamente peteĩ mbaꞌere. Oiméramo false, carrusel ndojapomo'ãi automáticamente ciclo.
teclado rehegua booleano rehegua teete Pe carrusel orreaccionava’erãpa umi acontecimiento teclado rehegua.
pa'ũ cadena rehegua | booleano rehegua 'hover' rehegua.

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. Ñañamindu’u kóva ha’eha además pe mouse reko yvateguápe.
guata sã japu Ombopu ijehegui carrusel puruhára ombojere rire manualmente peteĩha mbaꞌe. Oñemohenda ramo 'carousel', ombopu ijehegui carrusel carga-pe.
ape booleano rehegua teete Taha'e carrusel ociclava'erã continuamente térã oreko parada duro.
poko booleano rehegua teete Pe carrusel oipytyvõva’erãpa umi interacción deslizamiento izquierda/derecha rehegua umi dispositivo pantalla táctil-pe.

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 .

.carousel(options)

Omoñepyrü carrusel orekóva opciones opcionales objectha oñepyrü bicicleta umi artículo rupive.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Ojapo ciclo umi mba e carrusel rehegua rupive izquierda guive derecha peve.

.carousel('pause')

Ojoko carrusel ani haguã ohóva bicicleta rehe umi artículo rupive.

.carousel(number)

Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe). Ojevy ohenóivape ojehechauka mboyve mbaꞌe ojehekahápe (heꞌiséva oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).

.carousel('prev')

Ombohasa ciclo pe elemento ohasava’ekuépe. Ojevy ohenóivape ojehechauka mboyve mbaꞌe mboyvegua (heꞌiséva oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).

.carousel('next')

Ombojere pe mba’e oúvape. Ojevy ohenóivape ojehechauka mboyve mbaꞌe oúva (heꞌiséva oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).

.carousel('dispose')

Ombyai petet elemento carrusel.

.carousel('nextWhenVisible')

Ani rembohasa bicicleta-pe pe carrusel ambue gotyo ndojehechái jave pe páhina térã ndojehechái jave pe carrusel térã ituvakuéra. Ojevy ohenóivape ojehechauka mboyve mbaꞌe oúva (heꞌiséva oiko mboyve pe slid.bs.carouselmbaꞌe ojehúva).

.carousel('to')

Ombojere carrusel peteĩ marco particular-pe (0 oñemopyendáva, ojoguáva peteĩ matriz-pe). Ojevy ohenóivape ojehechauka mboyve mbaꞌe oúva (heꞌiséva 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
diapositiva.bs.carrusel rehegua Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave slidemétodo instancia rehegua.
deslizamiento.bs.carrusel rehegua Ko evento ojedispara carrusel omohu'ãvo transición diapositiva. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Omoambue transición duración

Pe transición duración de .carousel-itemikatu oñemoambue $carousel-transitionSass 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ẽha ñembohasa ñembohasa (techapyrã transition: transform 2s ease, opacity .5s ease-out).