Karuselli
Diaesityskomponentti, jolla voi kiertää elementtejä – kuvia tai tekstidioja – kuten karuselli.
Kuinka se toimii
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.).
prefers-reduced-motion
mediakyselystä. Katso
esteettömyysdokumentaation osio liikkeen vähentämisestä .
Huomaa, että sisäkkäisiä karuselleja ei tueta, eivätkä karusellit yleensä ole esteettömyysstandardien mukaisia.
Esimerkki
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.
Luokka on .active
lisättävä johonkin dioista, muuten karuselli ei näy. Muista myös asettaa yksilöllinen id
valinnaisille .carousel
säätimille, varsinkin jos käytät useita karuselleja yhdellä sivulla. Ohjaus- ja osoitinelementeillä on oltava data-bs-target
attribuutti (tai href
linkeissä), joka vastaa id
elementin attribuuttia .carousel
.
Vain dioja
Tässä on karuselli, jossa on vain dioja. .d-block
Huomaa karusellikuvien ja -merkkien läsnäolo .w-100
estääksesi selaimen oletuskuvan kohdistuksen.
<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>
Ohjainten kanssa
Edellisen ja seuraavan säätimen lisääminen. Suosittelemme <button>
elementtien käyttöä, mutta voit myös käyttää <a>
elementtejä 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>
Indikaattorien kanssa
Voit myös lisätä ilmaisimia karuselliin ohjaimien rinnalle.
<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>
Tekstityksillä
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
.
<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
Lisää .carousel-fade
karuselliisi animoidaksesi dioja häivytyksellä dian sijaan.
<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>
Yksilöllinen .carousel-item
intervalli
Lisää data-bs-interval=""
kohtaan a .carousel-item
muuttaaksesi ajan, joka kuluu automaattisesti seuraavaan kohteeseen siirtymisen välillä.
<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>
Poista kosketuspyyhkäisy käytöstä
Karusellit tukevat pyyhkäisemistä vasemmalle/oikealle kosketusnäytöllisissä laitteissa siirtyäksesi diojen välillä. Tämä voidaan poistaa käytöstä data-bs-touch
attribuutilla. Alla oleva esimerkki ei myöskään sisällä data-bs-ride
määritettä, data-bs-interval="false"
joten se ei toistu automaattisesti.
<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>
Tumma variantti
Lisää tummempia säätimiä .carousel-dark
, .carousel
ilmaisimia ja kuvatekstejä. Ohjaimet on käännetty oletusarvoisesta valkoisesta täytteestä filter
CSS-ominaisuuden avulla. Tekstityksissä ja säätimissä on ylimääräisiä Sass-muuttujia, jotka mukauttavat color
ja 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>
Mukautettu siirtyminen
Siirron kestoa .carousel-item
voidaan muuttaa $carousel-transition-duration
Sass-muuttujalla ennen kääntämistä tai mukautetuilla tyyleillä, jos käytät käännettyä CSS:ää. Jos käytetään useita siirtymiä, varmista, että muunnossiirtymä on määritetty ensin (esim. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Muuttujat
$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);
Käyttö
Tietomääritteiden kautta
Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-bs-slide
hyväksyy avainsanat prev
tai next
, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-bs-slide-to
voit siirtää raakadiaindeksin karuselliin data-bs-slide-to="2"
, joka siirtää dian sijainnin tiettyyn hakemistoon, joka alkaa merkillä 0
.
Attribuuttia data-bs-ride="carousel"
käytetään merkitsemään karuselli animaatioksi sivun latauksesta alkaen. Jos et käytä data-bs-ride="carousel"
karusellin alustamiseen, sinun on alustettava se itse. Sitä ei voi käyttää yhdessä (redundantin ja tarpeettoman) eksplisiittisen JavaScript-alustuksen kanssa samassa karusellissa.
JavaScriptin kautta
Soita karuselliin manuaalisesti:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Vaihtoehdot
Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-bs-
, kuten kohdassa data-bs-interval=""
.
Nimi | Tyyppi | Oletus | Kuvaus |
---|---|---|---|
interval |
määrä | 5000 |
Aika, joka kestää kohteen automaattisen kierroksen välillä. Jos false , karuselli ei pyöri automaattisesti. |
keyboard |
boolean | true |
Pitääkö karusellin reagoida näppäimistötapahtumiin. |
pause |
merkkijono | boolean | 'hover' |
Jos asetus on Kosketuskäyttöisissä laitteissa, kun asetus on |
ride |
merkkijono | boolean | false |
Toistaa karusellin automaattisesti, kun käyttäjä on kierrättänyt ensimmäisen kohteen manuaalisesti. Jos asetus on 'carousel' , toistaa karusellin automaattisesti latauksen aikana. |
wrap |
boolean | true |
Pitäisikö karusellin pyöräillä jatkuvasti vai pysähdyttääkö se kovaa. |
touch |
boolean | true |
Tukeeko karuselli vasemmalle/oikealle pyyhkäisyä kosketusnäytöllisissä laitteissa. |
menetelmät
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 .
Voit luoda karuselliinstanssin esimerkiksi karusellin rakentajalla, jos haluat alustaa lisävaihtoehdoilla ja alkaa selata kohteita:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Menetelmä | Kuvaus |
---|---|
cycle |
Kiertelee karusellikohteiden läpi vasemmalta oikealle. |
pause |
Estää karusellia pyöräilemästä esineiden läpi. |
prev |
Siirtyy edelliseen kohtaan. Palaa soittajalle ennen kuin edellinen kohde on näytetty (esim. ennen slid.bs.carousel tapahtumaa). |
next |
Siirtyy seuraavaan kohteeseen. Palaa soittajalle ennen kuin seuraava kohde on näytetty (esim. ennen slid.bs.carousel tapahtumaa). |
nextWhenVisible |
Älä siirrä karusellia seuraavaan, kun sivu ei ole näkyvissä tai karuselli tai sen ylätaso ei ole näkyvissä. Palaa soittajalle ennen kuin kohdekohde on näytetty |
to |
Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko). Palaa soittajalle ennen kuin kohdekohde on näytetty (esim. ennen slid.bs.carousel tapahtumaa). |
dispose |
Tuhoaa elementin karusellin. (Poistaa DOM-elementtiin tallennetut tiedot) |
getInstance |
Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän karuselliinstanssin, voit käyttää sitä seuraavasti:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Staattinen menetelmä, joka palauttaa DOM-elementtiin liitetyn karuselliinstanssin tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin:bootstrap.Carousel.getOrCreateInstance(element) |
Tapahtumat
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 |
Käynnistyy välittömästi, kun slide instanssimenetelmää kutsutaan. |
slid.bs.carousel |
Käynnistetään, kun karuselli on suorittanut diasiirtymän. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})