Karuselli
Diaesityskomponentti, jolla voi kiertää elementtejä – kuvia tai tekstidioja – kuten karuselli.
Karuselli on diaesitys sisältösarjan läpi pyöräilemiseen, ja se on rakennettu CSS 3D -muunnoksilla ja hieman JavaScriptillä. Se toimii kuvasarjan, tekstin tai mukautetun merkinnän kanssa. Se sisältää myös tuen edellisille/seuraaville säätimille ja ilmaisimille.
Selaimessa, jossa sivun näkyvyyden sovellusliittymää tuetaan, karuselli välttää liukumista, kun verkkosivu ei ole käyttäjän näkyvissä (kuten kun selaimen välilehti ei ole aktiivinen, selainikkuna on pienennetty jne.).
Huomaa, että sisäkkäisiä karuselleja ei tueta, eivätkä karusellit yleensä ole esteettömyysstandardien mukaisia.
Lopuksi, jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js
.
Karusellit eivät normalisoi diojen mittoja automaattisesti. Sellaisenaan saatat joutua käyttämään lisäapuohjelmia tai mukautettuja tyylejä sisällön sopivan koon mitoittamiseksi. Vaikka karusellit tukevat edellisiä/seuraavia säätimiä ja ilmaisimia, niitä ei erikseen vaadita. Lisää ja muokkaa haluamallasi tavalla.
Muista asettaa yksilöllinen tunnus .carousel
valinnaisille säätimille, varsinkin jos käytät useita karuselleja yhdellä sivulla.
Tässä on karuselli, jossa on vain dioja. .d-block
Huomaa karusellikuvien ja -merkkien läsnäolo .img-fluid
estääksesi selaimen oletuskuvan kohdistuksen.
<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>
Edellisen ja seuraavan säätimen lisääminen:
<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>
Voit myös lisätä ilmaisimia karuselliin ohjaimien rinnalle.
<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>
Alkuperäinen aktiivinen elementti vaaditaan
Luokka on .active
lisättävä johonkin dioista. Muuten karuselli ei näy.
Lisää kuvatekstejä dioihisi helposti minkä .carousel-caption
tahansa elementin avulla .carousel-item
. Ne voidaan helposti piilottaa pienempiin näyttöportteihin, kuten alla on esitetty, valinnaisten näyttöapuohjelmien avulla . Piilotamme ne aluksi sovelluksella .d-none
ja tuomme ne takaisin keskikokoisille laitteille -sovelluksella .d-md-block
.
Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-slide
hyväksyy avainsanat prev
tai next
, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-slide-to
voit siirtää raakadiaindeksin karuselliin data-slide-to="2"
, joka siirtää dian sijainnin tiettyyn hakemistoon, joka alkaa merkillä 0
.
Attribuuttia data-ride="carousel"
käytetään merkitsemään karuselli animaatioksi sivun latauksesta alkaen. Sitä ei voi käyttää yhdessä (redundantin ja tarpeettoman) eksplisiittisen JavaScript-alustuksen kanssa samassa karusellissa.
Soita karuselliin manuaalisesti:
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-
, kuten kohdassa data-interval=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
intervalli | määrä | 5000 | Aika, joka kestää kohteen automaattisen kierroksen välillä. Jos se on epätosi, karuselli ei pyöri automaattisesti. |
näppäimistö | boolean | totta | Pitääkö karusellin reagoida näppäimistötapahtumiin. |
tauko | merkkijono | boolean | "hover" | Jos asetus on Kosketuskäyttöisissä laitteissa, kun asetus on |
ratsastaa | merkkijono | väärä | Toistaa karusellin automaattisesti, kun käyttäjä on kierrättänyt ensimmäisen kohteen manuaalisesti. Jos "karuselli", toistaa karusellin automaattisesti latauksen aikana. |
kääri | boolean | totta | Pitäisikö karusellin pyöräillä jatkuvasti vai pysähdyttääkö se kovaa. |
Asynkroniset menetelmät ja siirtymät
Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .
Alustaa karusellin valinnaisilla vaihtoehdoilla object
ja alkaa selata kohteita.
Kiertelee karusellikohteiden läpi vasemmalta oikealle.
Estää karusellia pyöräilemästä esineiden läpi.
Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko). Palaa soittajalle ennen kuin kohdekohde on näytetty (eli ennen slid.bs.carousel
tapahtumaa).
Siirtyy edelliseen kohtaan. Palaa soittajalle ennen kuin edellinen kohde on näytetty (eli ennen slid.bs.carousel
tapahtumaa).
Siirtyy seuraavaan kohteeseen. Palaa soittajalle ennen kuin seuraava kohde on näytetty (eli ennen slid.bs.carousel
tapahtumaa).
Tuhoaa elementin karusellin.
Bootstrapin karuselliluokka paljastaa kaksi tapahtumaa, jotka liittyvät karusellitoimintoihin. Molemmilla tapahtumilla on seuraavat lisäominaisuudet:
direction
: Suunta, johon karuselli liukuu (joko"left"
tai"right"
).relatedTarget
: DOM-elementti, joka liu'utetaan paikalleen aktiivisena kohteena.from
: Nykyisen kohteen hakemistoto
: Seuraavan kohteen hakemisto
Kaikki karusellitapahtumat laukaistaan itse karuselliin (eli kohtaan <div class="carousel">
).
Tapahtumatyyppi | Kuvaus |
---|---|
slide.bs.carousel | Tämä tapahtuma käynnistyy välittömästi, kun slide instanssimenetelmää kutsutaan. |
slid.bs.karuselli | Tämä tapahtuma käynnistyy, kun karuselli on suorittanut diasiirtymän. |