Karuselė
Skaidrių demonstravimo komponentas, skirtas pereiti per elementus – vaizdus ar teksto skaidres – kaip karuselė.
Kaip tai veikia
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.).
prefers-reduced-motion
medijos užklausos. Žr
. mūsų pritaikymo neįgaliesiems dokumentacijos skyrių „Sumažintas judėjimas“ .
Atminkite, kad įdėtos karuselės nepalaikomos, o karuselės paprastai neatitinka pritaikymo neįgaliesiems standartų.
Pavyzdys
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.
Klasę .active
reikia pridėti prie vienos skaidrės, kitaip karuselė nebus matoma. Taip pat būtinai nustatykite unikalų id
pasirenkamų .carousel
valdiklių parametrą, ypač jei viename puslapyje naudojate kelias karuseles. Valdymo ir indikatoriaus elementai turi turėti data-bs-target
atributą (arba href
nuorodoms), atitinkantį id
elemento .carousel
atributą.
Tik skaidrės
Š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..w-100
<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>
Su valdikliais
Pridedamas ankstesnis ir kitas valdikliai. Rekomenduojame naudoti <button>
elementus, bet taip pat galite naudoti <a>
elementus su 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>
Su indikatoriais
Taip pat galite pridėti indikatorių prie karuselės, kartu su valdikliais.
<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>
Su užrašais
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
.
<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
Pridėkite .carousel-fade
prie karuselės, kad suaktyvintumėte skaidres su išnykimo perėjimu, o ne skaidrėmis.
<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>
Individualus .carousel-item
intervalas
Pridėti data-bs-interval=""
prie a .carousel-item
, kad pakeistumėte laiką, per kurį reikia uždelsti nuo automatinio perėjimo prie kito elemento.
<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>
Išjungti perbraukimą liečiant
Karuselės palaiko braukimą į kairę / dešinę jutiklinio ekrano įrenginiuose, kad galėtumėte pereiti nuo vienos skaidrės į kitą. Tai galima išjungti naudojant data-bs-touch
atributą. Toliau pateiktame pavyzdyje taip pat nėra data-bs-ride
atributo, data-bs-interval="false"
todėl jis automatiškai nepaleidžiamas.
<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>
Tamsus variantas
Pridėkite .carousel-dark
prie .carousel
tamsesnių valdiklių, indikatorių ir antraščių. Valdikliai buvo pakeisti iš numatytojo balto užpildo su filter
CSS ypatybe. Antraštės ir valdikliai turi papildomų Sass kintamųjų, kurie tinkina color
ir 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>
Pasirinktinis perėjimas
Perėjimo trukmę .carousel-item
galima pakeisti naudojant $carousel-transition-duration
Sass kintamąjį prieš kompiliuojant arba pasirinktinius stilius, jei naudojate sukompiliuotą CSS. Jei taikomi keli perėjimai, pirmiausia įsitikinkite, kad transformacijos perėjimas yra apibrėžtas (pvz., transition: transform 2s ease, opacity .5s ease-out
).
Sass
Kintamieji
$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);
Naudojimas
Per duomenų atributus
Naudokite duomenų atributus, kad lengvai valdytumėte karuselės padėtį. data-bs-slide
priima raktinius žodžius prev
arba next
, kuris pakeičia skaidrės padėtį, palyginti su dabartine padėtimi. Arba naudokite data-bs-slide-to
neapdorotą skaidrės rodyklę perduoti į karuselę data-bs-slide-to="2"
, kuri perkelia skaidrės padėtį į tam tikrą indeksą, prasidedantį 0
.
Atributas naudojamas data-bs-ride="carousel"
norint pažymėti karuselę kaip animacinę, pradedant nuo puslapio įkėlimo. Jei nenaudojate data-bs-ride="carousel"
karuselės inicijavimui, turite ją inicijuoti patys. Jo negalima naudoti kartu su (pertekline ir nereikalinga) aiškia tos pačios karuselės „JavaScript“ iniciacija.
Per JavaScript
Skambinkite į karuselę rankiniu būdu naudodami:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Galimybės
Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-bs-
, kaip ir data-bs-interval=""
.
vardas | Tipas | Numatytas | apibūdinimas |
---|---|---|---|
interval |
numerį | 5000 |
Laikas, per kurį reikia uždelsti tarp automatinio elemento paleidimo. Jei false , karuselė automatiškai nepasikeis. |
keyboard |
loginis | true |
Ar karuselė turėtų reaguoti į klaviatūros įvykius. |
pause |
styga | loginis | 'hover' |
Jei nustatyta Jutikliniuose įrenginiuose, kai nustatyta į |
ride |
styga | loginis | false |
Automatiškai paleidžiama karuselė po to, kai vartotojas rankiniu būdu perkelia pirmąjį elementą. Jei nustatyta į 'carousel' , automatiškai paleidžiama karuselė įkeliant. |
wrap |
loginis | true |
Ar karuselė turi važiuoti nuolat, ar sunkiai sustoti. |
touch |
loginis | true |
Ar karuselė turėtų palaikyti braukimo į kairę / dešinę sąveiką jutiklinio ekrano įrenginiuose. |
Metodai
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 .
Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .
Galite sukurti karuselės egzempliorių naudodami karuselės konstruktorių, pavyzdžiui, inicijuoti naudodami papildomas parinktis ir pradėti naršyti elementus:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metodas | apibūdinimas |
---|---|
cycle |
Važiuoja per karuselės elementus iš kairės į dešinę. |
pause |
Sustabdo karuselės judėjimą per daiktus. |
prev |
Perkeliama į ankstesnį elementą. Grįžta į skambinantįjį, kol nebuvo parodytas ankstesnis elementas (pvz., prieš slid.bs.carousel įvykį). |
next |
Perkeliama į kitą elementą. Grįžta pas skambinantįjį prieš parodant kitą elementą (pvz., prieš įvykstant slid.bs.carousel įvykiui). |
nextWhenVisible |
Nepereikite į kitą karuselę, kai puslapis nematomas arba nematoma karuselės ar jos pirminio puslapio. Grįžta į skambinantįjį prieš parodant tikslinį elementą |
to |
Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas). Grįžta į skambinantįjį prieš parodant tikslinį elementą (pvz., prieš įvykstant slid.bs.carousel įvykiui). |
dispose |
Sunaikina elemento karuselę. (Pašalina saugomus duomenis DOM elemente) |
getInstance |
Statinis metodas, leidžiantis gauti karuselės egzempliorių, susietą su DOM elementu, galite jį naudoti taip:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Statinis metodas, kuris grąžina karuselės egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip:bootstrap.Carousel.getOrCreateInstance(element) |
Renginiai
„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 |
---|---|
slide.bs.carousel |
Suaktyvinamas iš karto, kai slide iškviečiamas egzemplioriaus metodas. |
slid.bs.carousel |
Suaktyvinama, kai karuselė baigia skaidrės perėjimą. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})