Source

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

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 eñangareko emohenda hag̃ua peteĩ id ijojaha’ỹva pe .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 id .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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Umi control reheve

Oñemoĩvo umi control mboyve ha oúvape:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade rehegua

Emoĩ .carousel-fadende carrusel-pe emoingove hag̃ua umi diapositiva peteĩ transición descoloramiento reheve peteĩ diapositiva rangue.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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. 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. Japúramo, 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 ijeheguiete carrusel puruhára ombojere rire manualmente peteĩha mbaꞌe. "Carrusel" ramo, ombopu autojuego pe carrusel carga rehe.
ape booleano rehegua teete 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.

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

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