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'achkanchu, maskaqpa ventananta pisiyachisqa, wakkuna).
prefers-reduced-motion
medios tapuymanta hapirin. Yaykuna qillqaykumanta pisiyachisqa kuyuy t'aqapi qhaway
.
Ama hina kaspa, yachay anidado carruselkuna mana yanapasqachu, chaymanta carruselkuna generalmente mana haykuy kamachiykunawan hunt'asqachu.
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 .active
huknin diapositivaman yapakunan mana chayqa carrusel mana rikukunqachu. Hinallataq huk sapalla id
kaqpi churayta .carousel
chaymanta akllana kamachiykunapaq, aswanta sichus achka carruselkuna huk p'anqapi llamk'achkanki. Control chaymanta rikuchiq elementokuna huk data-bs-target
atributoyuq kananku tiyan (utaq href
t'inkikuna kaqpaq) chaymanta id
elementomanta .carousel
tupan.
Diapositivas solamente
Kaypi huk carrusel con diapositivas solamente. Reparay .d-block
chaymanta .w-100
carrusel siq'ikunapi kayninta maskaqpa ñawpaqmanta siq'i chiqanchayta harkananpaq.
<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>
Controles nisqawan
Ñawpaq chaymanta qatiq kamachiykunapi yapay. Elementokunata llamk'achiyta yuyaychayku , ichataq elementokunata <button>
llamk'achiyta atinki .<a>
role="button"
<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>
Indicadores nisqawan
Hinallataq, carruselman rikuchiqkunata yapayta atinki, controlkunap ladunpi, chaymanta.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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>
Con capciones
Diapositivaykikunaman qillqakunata yapay mana sasachakuspa .carousel-caption
mayqin ukhupi kaq elementowan .carousel-item
. Aswan huch'uy qhawanakunapi mana sasachu pakasqa kankuman, uraypi rikuchisqa hina, akllana qhaway yanapakuykunawan . Qallariypi pakayku kaywan .d-none
chaymanta kutichimuyku chawpi sayayniyuq dispositivokunapi kaqwan .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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 nisqa
Carruselniykiman yapay .carousel-fade
diapositivakunata huk diapositivapa rantinpi huk descoloramiento transiciónwan kawsachinaykipaq.
<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>
Sapakama .carousel-item
intervalo
data-bs-interval=""
Huk kaqman yapay .carousel-item
mayk'a pachata tardanapaq tikranapaq kikillanmanta bicicletapi puriymanta qatiq kaqman.
<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>
Desactivar deslizamiento de tocar
Carruselkuna pantalla llachpana dispositivokunapi lluq'i/alliq llalliyta yanapan diapositivakunapura kuyuypaq. data-bs-touch
Kayqa atributo nisqawanmi mana llamk'achisqa kanman . Uraypi ejemplopas mana data-bs-ride
atributota churanchu chaymanta data-bs-interval="false"
chayrayku mana autoplay ruwanchu.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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
Aswan yana controlkuna, rikuchiqkuna, chaymanta capciones kaqpaq .carousel-dark
chayman yapay . .carousel
Kamachiykuna ñawpaqmanta yuraq hunt'ayninmanta filter
CSS kaqwan tikrasqa kanku. Capciones chaymanta controles huk Sass variables yapasqayuq kanku chaymanta color
chaymanta background-color
.
<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 costumbre nisqa
Kay tikray unayniyuq .carousel-item
kay Sass tikraqwan manaraq huñuchkaspa utaq sapanchasqa estilokunawan tikrasqa kanman $carousel-transition-duration
sichus huñusqa CSS kaqwan llamk'achkanki. Achka tikraykunata churaptinkuqa, tikray tikray ñawpaqta riqsichisqa kananpaq qhaway (kayhina transition: transform 2s ease, opacity .5s ease-out
).
Sass
Variables nisqakuna
$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`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Uso
Atributos de datos nisqawan
Atributos de datos nisqawan carruselpa posiciónninta mana sasachakuspalla kamachinaykipaq. data-bs-slide
llalliq simikunata chaskikun prev
utaq next
, chaymi diapositivapa kayninta kunan kasqanman hina tikran. Hukninpiqa, data-bs-slide-to
huk raw diapositiva indiceta carruselman pasananpaq llamk'achiy data-bs-slide-to="2"
, chaymi diapositivapa kayninta huk indice particularman tikran ,wan qallarispa 0
.
Atributo data-bs-ride="carousel"
nisqaqa huk carrusel nisqa p'anqa kargamanta qallarispa kawsachiq hina markanapaqmi llamk'achisqa. Sichus mana data-bs-ride="carousel"
carruselniyki qallariypaq llamk'achkankichu, qam kikiyki qallarichinayki tiyan. Mana llamk'achiy atikunmanchu (redundante chaymanta mana necesario) sut'i JavaScript qallariywan kikin carrusel kaqwan kuskachasqa.
JavaScript nisqawan
Llama a carrusel manualmente con:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Akllanakuna
Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-bs-
, imaynachus data-bs-interval=""
.
Suti | Niraq | Ñawpaqchasqa | Willay |
---|---|---|---|
interval |
yupay | 5000 |
Huk imapas kikillanmanta bicicletapi purichiymanta hayk'a pacha tardanapaq. Sichus false , carrusel mana kikillanmantachu ciclopi purinqa. |
keyboard |
boolean nisqa | true |
Sichus carrusel tecladopi sucedesqanwan reaccionananchu icha manachu. |
pause |
q'aytu | boolean nisqa | 'hover' |
Sichus churasqa kachkan Llachpanapaq atichisqa dispositivokunapi, , kaqpi churasqa kaqtin |
ride |
q'aytu | boolean nisqa | false |
Kikinmanta carruselta pukllan chaymanta llamk'achiq makiwan ñawpaq kaq imata muyuchisqanmanta. Sichus churasqa 'carousel' , autoplay carrusel cargapi. |
wrap |
boolean nisqa | true |
Carrusel sapa kutilla bicicletapi purinan icha sinchi sayayniyuq kanan icha manachu. |
touch |
boolean nisqa | true |
Sichus carrusel yanapanan tiyan lluq'i/alliq swipe interacciones pantalla táctil dispositivokunapi. |
Métodos
Métodos y transiciones asíncronas
Llapan API ruwanakuna mana sink'uyuq kanku chaymanta huk tikrayta qallarinku . Paykunaqa kutinku waqyaqman chaylla transición qallarisqa ichaqa manaraq tukukuchkaptin . Chaymantapas, huk tikray componente kaqpi huk método waqyay mana qhawasqachu kanqa .
Carrusel ruwaqwan huk carrusel instanciata ruwayta atikunki, kayhina, yapasqa akllanakunawan qallariypaq chaymanta imakuna chawpipi ciclota qallariypaq:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Imayna | Willay |
---|---|
cycle |
Carrusel nisqa imakunatapas lluq’imanta pañaman muyurin. |
pause |
Carruselta imakuna chawpinta bicicletapi purinanta harkan. |
prev |
Ñawpaq kaq kaqman muyurin. Llamaqman kutimun manaraq ñawpaq kaq rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carousel ruway ruwakuchkaptin). |
next |
Qatiqnin kaqman ciclokuna. Llamaqman kutimun manaraq qatiq imapas rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carousel ruway ruwakuchkaptin). |
nextWhenVisible |
Ama bicicletapi carruselta qatiqninman puriychu, p'anqa mana rikukuptin utaq carrusel utaq tayta-maman mana rikukuptin. Llamaqman kutimun manaraq imachus munasqa rikuchisqa kachkaptin |
to |
Carruselta huk marco particularman muyuchin (0 kaqpi, huk matrizman rikch'akuq). Llamaqman kutimun manaraq imachus munasqa rikuchisqa kachkaptin (kayhina, manaraq slid.bs.carousel ruway ruwakuchkaptin). |
dispose |
Huk elementopa carruselnintam chinkachin. (DOM elementopi waqaychasqa willayta hurqun) |
getInstance |
Método estático mayqinchus huk DOM elementowan tinkisqa carrusel instanciata jap'iyta atikun, kayhinata llamk'achiy atikunki:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Método estático mayqinchus huk DOM elementowan tinkisqa carrusel instanciata kutichin utaq musuq ruwan mana qallarisqa kaqtin. Chaytaqa kayhinatam servichikuwaq:bootstrap.Carousel.getOrCreateInstance(element) |
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 nisqato
: Qatiqninpi kaqpa indice nisqa
Tukuy carrusel ruwaykuna kikin carruselpi (ichataq chay <div class="carousel">
).
Tipo de evento | Willay |
---|---|
slide.bs.carousel |
slide Instancia método waqyasqa kaqtin chaylla rawrarin. |
slid.bs.carousel |
Carrusel diapositiva transicionninta tukuptinqa disparasqa. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})