Karrusela
Elementuetan zehar (irudiak edo testu-diapositibak) bizikletaz ibiltzeko diapositiba-aurkezpenaren osagaia, karrusel bat bezala.
Nola dabil
Karrusela eduki sorta batean zehar bizikletaz ibiltzeko diapositiba aurkezpena da, CSS 3D eraldaketekin eta JavaScript pixka batekin eraikia. Irudi, testu edo marka pertsonalizatu batzuekin funtzionatzen du. Aurreko/hurrengo kontrol eta adierazleetarako laguntza ere barne hartzen du.
Page Visibility APIa onartzen duten arakatzaileetan , karruselak irristatzea saihestuko du webgunea erabiltzaileak ikusten ez duenean (adibidez, arakatzailearen fitxa inaktibo dagoenean, arakatzailearen leihoa minimizatuta dagoenean, etab.).
prefers-reduced-motion
multimedia kontsultaren menpe dago. Ikusi
gure irisgarritasun-dokumentazioaren mugimendu murriztuaren atala .
Kontuan izan habiaratutako karruselak ez direla onartzen eta, oro har, karruselek ez dituztela irisgarritasun estandarrak betetzen.
Azkenik, gure JavaScript iturritik eraikitzen ari bazara, behar duutil.js
.
Adibidea
Karruselek ez dituzte diapositiba-dimentsioak automatikoki normalizatzen. Hori dela eta, baliteke utilitate gehigarriak edo estilo pertsonalizatuak erabili behar izatea edukia behar bezala tamainatzeko. Karruselek aurreko/hurrengo kontrolak eta adierazleak onartzen dituzten arren, ez dira espresuki beharrezkoak. Gehitu eta pertsonalizatu egoki ikusten duzun moduan.
.active
Klasea diapositiba batean gehitu behar da, bestela karrusela ez da ikusgai egongo. Ziurtatu aukerako kontroletarako bakarra ezarri duzula id
, .carousel
batez ere orrialde bakarrean hainbat karrusel erabiltzen ari bazara. Kontrol eta adierazle elementuek elementuarekin bat datorren data-target
atributu bat (edo esteketarako) izan behar dute .href
id
.carousel
Diapositibak soilik
Hona hemen diapositibak soilik dituen karrusel bat. .d-block
Kontuan izan karruselaren eta irudien presentzia .w-100
arakatzailearen irudi lehenetsien lerrokatzea saihesteko.
<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>
Kontrolekin
Aurreko eta hurrengo kontrolak gehitzea. Elementuak erabiltzea gomendatzen dugu , baina elementuekin <button>
ere erabil ditzakezu .<a>
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>
Adierazleekin
Adierazleak ere gehi ditzakezu karrusela, kontrolekin batera.
<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>
Epigrafeekin
Gehitu erraz azpitituluak zure diapositibetan .carousel-caption
edozein elementurekin .carousel-item
. Ikuspegi txikiagoetan erraz ezkutatu daitezke, behean erakusten den moduan, aukerako pantaila-utilitateekin . Hasieran ezkutatzen ditugu .d-none
eta gailu ertainetara itzultzen ditugu .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
Gehitu .carousel-fade
karruselera diapositibak animatzeko, diapositiba baten ordez, desagertzeko trantsizio batekin. Zure karruselaren edukiaren arabera (adibidez, testua soilik diapositibak), baliteke .bg-body
CSS pertsonalizatu batzuk gehitu nahi izatea .carousel-item
gurutze-fading egokia izateko.
<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>
Banakako .carousel-item
tartea
Gehitu data-interval=""
a .carousel-item
-ra automatikoki bizikletaz hurrengo elementura arte atzeratu behar den denbora aldatzeko.
<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>
Desgaitu ukipen-hastaketa
Karruselek ezkerrera/eskuinera mugitzea onartzen dute ukipen-pantailako gailuetan diapositiba batetik bestera mugitzeko. data-touch
Hau atributua erabiliz desgaitu daiteke . Beheko adibideak ere ez du data-ride
atributua sartzen eta badu data-interval="false"
, beraz, ez da automatikoki erreproduzitzen.
<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>
Erabilera
Datu-atributuen bidez
Erabili datu-atributuak karruselaren posizioa erraz kontrolatzeko. data-slide
gako-hitzak onartzen ditu prev
edo next
, eta horrek diapositiba-posizioa bere uneko posizioarekiko aldatzen du. Bestela, erabili data-slide-to
diapositiba-indize gordina karruselara pasatzeko data-slide-to="2"
, eta horrek diapositiba-posizioa indize jakin batera aldatzen du 0
.
data-ride="carousel"
Atributua orria kargatzean hasita karrusel bat animazio gisa markatzeko erabiltzen da . Zure karrusela hasieratzeko erabiltzen ez data-ride="carousel"
baduzu, zuk zeuk hasieratu beharko duzu. Ezin da erabili karrusel beraren Javascript-en hasiera esplizituarekin batera (erredundantea eta beharrezkoa ez dena).
JavaScript bidez
Deitu karuselera eskuz honekin:
$('.carousel').carousel()
Aukerak
Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-
, hemen bezala data-interval=""
.
Izena | Mota | Lehenetsia | Deskribapena |
---|---|---|---|
tartea | zenbakia | 5000 | Elementu bat automatikoki bizikletaz ibiltzearen artean atzeratu behar den denbora. Bada false , karrusela ez da automatikoki zirkulatuko. |
teklatua | boolearra | egia | Karruselak teklatuko gertaeren aurrean erreakzionatu behar duen ala ez. |
pausa | katea | boolearra | 'pasatu' | Aukeran ezartzen bada Ukimen-gaitutako gailuetan, aukeran ezarrita dagoenean |
ibili | katea | faltsua | Karrusela automatikoki erreproduzitzen du erabiltzaileak lehen elementua eskuz zikloa egin ondoren. Honetan ezartzen bada 'carousel' , karrusela automatikoki erreproduzitzen du kargatzean. |
bildu | boolearra | egia | Karruselak etengabe zirkulatzen duen edo geldialdi gogorrak izan behar dituen. |
ukitu | boolearra | egia | Karruselak ukipen-pantailako gailuetan ezkerrera/eskuinera irristatu elkarrekintzak onartu behar dituen ala ez. |
Metodoak
Metodo asinkronoak eta trantsizioak
API metodo guztiak asinkronoak dira eta trantsizio bat hasten dute . Trantsizioa hasi bezain laster baina amaitu baino lehen itzultzen dira deitzailearengana . Gainera, trantsizio-osagai baten metodo-dei bati ez ikusi egingo zaio .
Ikus gure JavaScript dokumentazioa informazio gehiago lortzeko .
.carousel(options)
Karrusela hautazko aukera batekin hasieratzen du object
eta elementuen bidez bizikletaz hasten da.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Karruselaren elementuetan zehar ibiliko da ezkerretik eskuinera.
.carousel('pause')
Karrusela elementuetan zehar bizikletaz ibiltzeari uzten dio.
.carousel(number)
Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera). Xede-elementua erakutsi aurretik (hau da, slid.bs.carousel
gertaera gertatu baino lehen) itzultzen da deitzaileari.
.carousel('prev')
Zikloak aurreko elementura. Aurreko elementua erakutsi aurretik (hau da, slid.bs.carousel
gertaera gertatu baino lehen) itzultzen da deitzen duenari.
.carousel('next')
Zikloak hurrengo elementura. Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carousel
gertaera gertatu baino lehen).
.carousel('dispose')
Elementu baten karrusela suntsitzen du.
.carousel('nextWhenVisible')
Ez ibili karrusela hurrengora orria ikusten ez denean edo karrusela edo haren gurasoa ikusten ez denean. Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carousel
gertaera gertatu baino lehen).
.carousel('to')
Karrusela fotograma jakin batera birziklatzen du (0 oinarrian, array baten antzera). Deitzailearengana itzultzen da hurrengo elementua erakutsi baino lehen (hau da, slid.bs.carousel
gertaera gertatu baino lehen).
Gertaerak
Bootstrap-en karrusel klaseak bi gertaera erakusten ditu karruselaren funtzionalitatera konektatzeko. Bi ekitaldiek propietate gehigarri hauek dituzte:
direction
: Karrusela irristatzen den norabidea ("left"
edo"right"
).relatedTarget
: elementu aktibo gisa lekuan sartzen ari den DOM elementua.from
: Uneko elementuaren indizeato
: Hurrengo elementuaren aurkibidea
Karruselaren gertaera guztiak karruselaren aurka jaurtitzen dira (hau da, <div class="carousel">
).
Gertaera mota | Deskribapena |
---|---|
diapositiba.bs.karrusela | Gertaera hau berehala abiarazten slide da instantzia-metodoa deitzen denean. |
irristatu.bs.karrusel | Gertaera hau karruselak diapositiba-trantsizioa amaitu duenean abiarazten da. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Aldatu trantsizioaren iraupena
Trantsizioaren iraupena Sass aldagaiarekin .carousel-item
alda daiteke $carousel-transition
konpilatu aurretik edo estilo pertsonalizatuak konpilatutako CSS erabiltzen ari bazara. Trantsizio anitz aplikatzen badira, ziurtatu transformazio-trantsizioa lehenik definitu dela (adib. transition: transform 2s ease, opacity .5s ease-out
).