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.

Emohenda katuete peteĩ id ijojaha’ỹva pe .carouselumi control opcional-pe g̃uarã, ko’ýte reiporúramo heta carrusel peteĩ páhinape.

Diapositivas añoite

Ko'ápe oî peteî carrusel orekóva diapositivas añoite. Eñatendéke oĩha .d-blockha .img-fluidcarrusel 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Umi control reheve

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

Mboyvegua Ag̃ui

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Mboyvegua Ag̃ui

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Peteĩha etiqueta diapositiva rehegua

Nulla vitae elit libero, peteĩ ñe’ẽpoty augue mollis interdum rehegua.

Mokõiha etiqueta diapositiva rehegua

Lorem ipsum dolor oguapy amet, consectetur adipiscing elit.

Mbohapyha etiqueta diapositiva rehegua

Praesent commodo cursus magna, vel escelerisque nisl consectetur rehegua.

Mboyvegua Ag̃ui

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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="".

Método-kuéra rehegua

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})