Karuselė
Skaidrių demonstravimo komponentas, skirtas pereiti per elementus – vaizdus ar teksto skaidres – kaip karuselė.
Karuselė yra skaidrių demonstracija, skirta važiuoti per daugybę turinio, sukurta naudojant CSS 3D transformacijas ir šiek tiek JavaScript. Jis veikia su vaizdų, teksto ar pasirinktinio žymėjimo serijomis. Tai taip pat apima ankstesnių / kitų valdiklių ir indikatorių palaikymą.
Naršyklėse, kuriose palaikoma Puslapio matomumo API , karuselė išvengs slydimo, kai tinklalapio vartotojas nemato (pvz., kai naršyklės skirtukas neaktyvus, naršyklės langas sumažintas ir pan.).
Atminkite, kad įdėtos karuselės nepalaikomos, o karuselės paprastai neatitinka pritaikymo neįgaliesiems standartų.
Galiausiai, jei kuriate „JavaScript“ iš šaltinio, tam reikiautil.js
.
Karuselės automatiškai nesunormina skaidrės matmenų. Todėl gali tekti naudoti papildomas priemones arba pasirinktinius stilius, kad galėtumėte tinkamai nustatyti turinį. Nors karuselės palaiko ankstesnius / kitus valdiklius ir indikatorius, jie nėra aiškiai reikalingi. Pridėkite ir tinkinkite, kaip jums atrodo tinkama.
Būtinai nustatykite unikalų .carousel
pasirenkamų valdiklių ID, ypač jei viename puslapyje naudojate kelias karuseles.
Štai karuselė tik su skaidrėmis. Atkreipkite dėmesį į karuselės vaizdų buvimą .d-block
ir , kad išvengtumėte numatytojo naršyklės vaizdo išlygiavimo..img-fluid
<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>
Ankstesnio ir kito valdiklio pridėjimas:
<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>
Taip pat galite pridėti indikatorių prie karuselės, kartu su valdikliais.
<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>
Reikalingas pradinis aktyvus elementas
.active
Klasę reikia įtraukti į vieną iš skaidrių . Priešingu atveju karuselė nebus matoma.
Lengvai pridėkite antraštes skaidrėse naudodami .carousel-caption
elementą bet kuriame .carousel-item
. Juos galima lengvai paslėpti mažesnėse peržiūros srityse, kaip parodyta toliau, naudojant pasirenkamas rodymo priemones . Iš pradžių paslepiame juos naudodami .d-none
ir grąžiname vidutinio dydžio įrenginiuose naudodami .d-md-block
.
Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-slide
priima raktinius žodžius prev
arba next
, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-slide-to
neapdorotą skaidrės rodyklę perduoti į karuselę data-slide-to="2"
, kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį 0
.
Atributas naudojamas data-ride="carousel"
norint pažymėti karuselę kaip animacinę, pradedant nuo puslapio įkėlimo. Jo negalima naudoti kartu su (pertekline ir nereikalinga) aiškia tos pačios karuselės „JavaScript“ iniciacija.
Skambinkite į karuselę rankiniu būdu naudodami:
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-
, kaip ir data-interval=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
intervalas | numerį | 5000 | Laikas, per kurį reikia uždelsti tarp automatinio elemento paleidimo. Jei klaidinga, karuselė automatiškai nepasikeis. |
klaviatūra | loginis | tiesa | Ar karuselė turėtų reaguoti į klaviatūros įvykius. |
Pauzė | styga | loginis | "svyruoti" | Jei nustatyta Jutikliniuose įrenginiuose, kai nustatyta į |
važiuoti | styga | klaidinga | Automatiškai paleidžiama karuselė po to, kai vartotojas rankiniu būdu perkelia pirmąjį elementą. Jei „karuselė“, automatiškai paleidžiama karuselė įkeliant. |
apvynioti | loginis | tiesa | Ar karuselė turi važiuoti nuolat, ar sunkiai sustoti. |
Asinchroniniai metodai ir perėjimai
Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .
Inicijuoja karuselę su pasirenkamomis parinktimis object
ir pradeda važiuoti per elementus.
Važiuoja per karuselės elementus iš kairės į dešinę.
Sustabdo karuselės judėjimą per daiktus.
Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas). Grįžta į skambinantįjį prieš parodant tikslinį elementą (ty prieš slid.bs.carousel
įvykį).
Perkeliama į ankstesnį elementą. Grįžta į skambinantįjį, kol nebuvo parodytas ankstesnis elementas (ty prieš slid.bs.carousel
įvykį).
Perkeliama į kitą elementą. Grįžta į skambinantįjį prieš parodant kitą elementą (ty prieš slid.bs.carousel
įvykį).
Sunaikina elemento karuselę.
„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų. Abu įvykiai turi šias papildomas savybes:
direction
: kryptis, kuria slysta karuselė ("left"
arba"right"
).relatedTarget
: DOM elementas, kuris stumiamas į vietą kaip aktyvus elementas.from
: dabartinio elemento rodyklėto
: kito elemento rodyklė
Visi karuselės įvykiai suaktyvinami pačioje karuselėje (ty į <div class="carousel">
).
Renginio tipas | apibūdinimas |
---|---|
skaidrė.bs.karuselė | Šis įvykis suaktyvinamas iš karto, kai slide iškviečiamas egzemplioriaus metodas. |
slid.bs.karuselė | Šis įvykis suaktyvinamas, kai karuselė baigia skaidrės perėjimą. |