Carrusel

Huk diapositiva rikuchiy componente elementokuna chawpipi ciclopaq —imaynakuna utaq qillqasqapa diapositivakuna— huk carrusel hina.

Imayna llamkan

Carrusel huk diapositiva rikuchiy huk serie contenido kaqpi ciclo kaqpaq, CSS 3D tikraykunawan ruwasqa chaymanta huk chhika JavaScript kaqwan ruwasqa. Huk qatiq siq'ikunawan, qillqawan utaq sapanchasqa markawan llamk'an. Hinallataqmi yanapakuy ñawpaq/qhipa kamachiykunapaq chaymanta rikuchiqkunata churan.

Navegadorkunapi maypichus API P'anqa Rikuna yanapasqa kachkan, carrusel mana llimp'inqachu mayk'aq web kiti mana ruwaqpaq rikukunchu (kayhina mayk'aq maskaq ñiqi mana llamk'achkan, maskaqpa ventananta pisiyachisqa, wakkuna).

Ama hina kaspa, yachay anidado carruselkuna mana yanapasqachu, chaymanta carruselkuna generalmente mana haykuy kamachiykunawan hunt'asqachu.

Tukuyninpaq, sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .

Qatina

Carruselkunaqa manam kikillanmantachu diapositivapa dimensionninkunata normalizanku. Chayhina, yapa yanapakuykunata utaq sapanchasqa estilokuna llamk'achiyta necesitankiman allinta contenidota sayachinaykipaq. Carruselkuna ñawpaq/qhipa kamachiykunata chaymanta rikuchiqkunata yanapaptinkupas, mana sut'imantachu mañasqa kanku. Yanapay hinaspa ruway munasqaykiman hina.

Clase nisqa .activehuknin diapositivaman yapakunan mana chayqa carrusel mana rikukunqachu. Hinallataq huk sapalla id kaqpi churayta kay .carouselakllana kamachiykunapaq, aswanta sichus achka carruselkuna huk p'anqapi llamk'achkanki. Control chaymanta rikuchiq elementokuna huk data-targetatributoyuq kananku tiyan (utaq t'inkikuna kaqpaq) chaymanta elemento hrefid kaqwan tupan ..carousel

Diapositivas solamente

Kaypi huk carrusel con diapositivas solamente. Reparay .d-blockchaymanta .w-100carrusel siq'ikunapi kayninta maskaqpa ñawpaqmanta siq'i chiqanchayta harkananpaq.

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

Controles nisqawan

Ñawpaq chaymanta qatiq kamachiykunapi yapay:

Ñawpaq Qatiq

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

Indicadores nisqawan

Hinallataq, carruselman rikuchiqkunata yapayta atinki, controlkunap ladunpi, chaymanta.

Ñawpaq Qatiq

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

Con capciones

Diapositivaykikunaman qillqakunata yapay mana sasachakuspa .carousel-captionmayqin ukhupi kaq elementowan .carousel-item. Aswan huch'uy qhawanakunapi mana sasachu pakasqa kankuman, uraypi rikuchisqa hina, akllana qhaway yanapakuykunawan . Qallariypi pakayku kaywan .d-nonechaymanta kutichimuyku chawpi sayayniyuq dispositivokunapi kaqwan .d-md-block.

Ñawpaq kaq diapositiva etiqueta

Nulla vitae elit libero nisqa, huk pharetra augue mollis interdum nisqa.

Iskay kaq diapositiva etiqueta

Lorem ipsum dolor tiyay amet, consectetur adipiscing elit.

Kimsa kaq diapositiva etiqueta

Praesent commodo cursus magna nisqa, vel escelerisque nisqa nisl consectetur nisqa.

Ñawpaq Qatiq

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

Crossfade nisqa

Carruselniykiman yapay .carousel-fadediapositivakunata huk diapositivapa rantinpi huk descoloramiento transiciónwan kawsachinaykipaq.

Ñawpaq Qatiq

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

Uso

Atributos de datos nisqawan

Atributos de datos nisqawan yanapachikuy carruselpa maypi kayninta mana sasachakuspalla kamachinaykipaq. data-slidellalliq simikunata chaskikun prevutaq next, chaymi diapositivapa kayninta kunan kasqanman hina tikran. Hukninpiqa, data-slide-tohuk raw diapositiva indiceta carruselman pasananpaq llamk'achiy data-slide-to="2", chaymi diapositivapa kayninta huk indice particularman tikran ,wan qallarispa 0.

Atributo data-ride="carousel"nisqaqa huk carrusel nisqa p'anqa kargamanta qallarispa kawsachiq hina markanapaqmi llamk'achisqa. Mana llamk'achiy atikunmanchu (redundante chaymanta mana necesario) sut'i JavaScript qallariywan kikin carrusel kaqwan kuskachasqa.

JavaScript nisqawan

Llama a carrusel manualmente con:

$('.carousel').carousel()

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-interval="".

Métodos

.carousel(options)

Carruselta huk opcional akllanakunawan objectqallarichin chaymanta bicicletapi puriyta qallarikun imakuna kaqnintakama.

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

.carousel('cycle')

Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin.

.carousel('pause')

Carruselta imakuna chawpinta bicicletapi purinanta harkan.

.carousel(number)

Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq). Llamaqman kutimun manaraq imachus munasqa rikuchisqa kachkaptin (icha manaraq slid.bs.carouselruway ruwakuchkaptin).

.carousel('prev')

Ñawpaq kaq kaqman muyurin. Llamaqman kutimun manaraq ñawpaq kaq rikuchisqa kachkaptin (icha manaraq slid.bs.carouselruway ruwakuchkaptin).

.carousel('next')

Qatiqnin kaqman ciclokuna. Llamaqman kutimun manaraq qatiq imapas rikuchisqa kachkaptin (icha manaraq slid.bs.carouselruway ruwakuchkaptin).

.carousel('dispose')

Huk elementopa carruselnintam chinkachin.

Eventos nisqakuna

Bootstrap kaqpa carrusel clase iskay ruwaykunata rikuchin carrusel ruwanaman enganche kaqpaq. Iskaynin ruwaykuna kay yapasqa propiedadesniyuq kanku:

• direction: Carrusel maymanchus llimp’isqan (yaqapas "left"utaq "right").
• relatedTarget: DOM elemento mayqinchus llamk'aq elemento hina maychus kananman llimp'isqa kachkan.
• from: Kunan kaq imayaypa indice nisqa
• to: Qatiqninpi kaqpa indice nisqa

Llapan carrusel ruwaykuna kikin carruselpi (ichataq chay <div class="carousel">).

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

Cambio de duración de transición

Kay tikray unayniyuq .carousel-itemkay Sass tikraqwan manaraq huñuchkaspa utaq sapanchasqa estilokunawan tikrasqa kanman $carousel-transitionsichus huñusqa CSS kaqwan llamk'achkanki. Achka tikraykunata churaptinkuqa, tikray tikray ñawpaqta riqsichisqa kananpaq qhaway (kayhina transition: transform 2s ease, opacity .5s ease-out).