Körhinta
Diavetítés-összetevő az elemek – képek vagy szöveges diák – közötti kerékpározáshoz, mint egy körhinta.
Hogyan működik
A körhinta egy diavetítés a tartalom sorozatának végigjátszásához, CSS 3D-transzformációkkal és egy kis JavaScript-kóddal. Képsorozattal, szöveggel vagy egyéni jelöléssel működik. Tartalmazza az előző/következő vezérlők és indikátorok támogatását is.
Azokban a böngészőkben, ahol az oldalláthatósági API támogatott, a körhinta elkerüli a csúszást, ha a weboldal nem látható a felhasználó számára (például amikor a böngésző lap inaktív, a böngészőablak le van kicsinyítve stb.).
prefers-reduced-motion
. Tekintse
meg akadálymentesítési dokumentációnk csökkentett mozgással foglalkozó részét .
Kérjük, vegye figyelembe, hogy a beágyazott körhinta nem támogatott, és a körhinta általában nem felel meg a kisegítő lehetőségek szabványainak.
Példa
A körhinta nem normalizálja automatikusan a diák méreteit. Ezért előfordulhat, hogy további segédprogramokat vagy egyéni stílusokat kell használnia a tartalom megfelelő méretéhez. Míg a körhinta támogatja az előző/következő vezérlőket és jelzőket, ezekre nincs kifejezetten szükség. Adja hozzá és szabja testre, ahogy jónak látja.
Az .active
osztályt hozzá kell adni az egyik diához , különben a körhinta nem lesz látható. id
Ügyeljen arra is, hogy az opcionális vezérlőkhöz egyedi értéket állítson be .carousel
, különösen, ha több körhintat használ egyetlen oldalon. A vezérlő- és jelzőelemeknek rendelkezniük kell egy data-bs-target
attribútummal (vagy href
hivatkozásoknál), amely megegyezik id
az .carousel
elem jellemzőjével.
Csak diák
Itt egy körhinta csak csúszdákkal. Jegyezze meg a .d-block
és .w-100
a körhinta képen való jelenlétét, hogy megakadályozza a böngésző alapértelmezett képigazítását.
<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>
Vezérlőkkel
Az előző és a következő vezérlőelemek hozzáadása. Javasoljuk, hogy <button>
elemeket használjon, de használhat <a>
elemeket is 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>
Mutatókkal
A kijelzőket a kezelőszervek mellett a körhintahoz is hozzáadhatja.
<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>
Feliratokkal
Egyszerűen adhat feliratokat diákjaihoz a .carousel-caption
tetszőleges elemen belül .carousel-item
. Könnyen elrejthetők kisebb nézetablakban, amint az alább látható, opcionális megjelenítési segédprogramokkal . Kezdetben elrejtjük őket a segítségével, .d-none
majd a közepes méretű eszközökön visszahozzuk a segítségével .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
Adja .carousel-fade
hozzá a körhintahoz, hogy dia helyett halványítással animálhassa a diákat.
<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>
Egyéni .carousel-item
intervallum
Hozzáadás data-bs-interval=""
az a -hoz, .carousel-item
hogy módosítsa a késleltetési időt az automatikus ciklus és a következő elem között.
<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>
Az érintéses csúsztatás letiltása
A körhinta támogatja a balra/jobbra csúsztatást az érintőképernyős eszközökön a diák közötti váltáshoz. data-bs-touch
Ez az attribútum használatával letiltható . Az alábbi példa szintén nem tartalmazza az data-bs-ride
attribútumot, data-bs-interval="false"
ezért nem játszható le automatikusan.
<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>
Sötét változat
Adja hozzá .carousel-dark
a .carousel
sötétebb vezérlőket, jelzőket és feliratokat. A vezérlőelemek az alapértelmezett fehér kitöltést a filter
CSS tulajdonsággal megfordították. A feliratok és vezérlőelemek további Sass-változókkal rendelkeznek, amelyek testreszabják a color
és a 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>
Egyedi átmenet
Az áttérés időtartama .carousel-item
módosítható a $carousel-transition-duration
Sass változóval a fordítás előtt, vagy egyéni stílusokkal, ha a lefordított CSS-t használja. Ha több átmenetet alkalmaz, győződjön meg arról, hogy először az átalakítási átmenetet határozza meg (pl. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Változók
$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);
Használat
Adatattribútumokon keresztül
Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. data-bs-slide
elfogadja a prev
vagy kulcsszavakat next
, amely megváltoztatja a dia helyzetét az aktuális pozícióhoz képest. Alternatív megoldásként használja data-bs-slide-to
a nyers diaindexet a körhintahoz data-bs-slide-to="2"
, amely eltolja a dia pozícióját egy adott indexre, kezdve a -val 0
.
Az data-bs-ride="carousel"
attribútum a körhinta animációsként való megjelölésére szolgál az oldal betöltésével kezdődően. Ha nem használja data-bs-ride="carousel"
a körhinta inicializálását, magának kell inicializálnia. Nem használható ugyanazon körhinta (redundáns és szükségtelen) explicit JavaScript inicializálásával együtt.
JavaScripten keresztül
Körhinta kézi hívása a következőkkel:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Lehetőségek
Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-bs-
következőhöz: data-bs-interval=""
.
Név | típus | Alapértelmezett | Leírás |
---|---|---|---|
interval |
szám | 5000 |
Az a késleltetési idő, amely eltelik egy tétel automatikus ciklusba állítása között. Ha false , a körhinta nem forog automatikusan. |
keyboard |
logikai érték | true |
A körhinta reagáljon-e a billentyűzet eseményeire. |
pause |
húr | logikai érték | 'hover' |
Ha ez a beállítás Érintésképes eszközökön, ha értékre van állítva |
ride |
húr | logikai érték | false |
Automatikusan lejátssza a körhinta, miután a felhasználó manuálisan körbeforgatta az első elemet. Ha értékre van állítva 'carousel' , automatikusan lejátssza a körhinta betöltéskor. |
wrap |
logikai érték | true |
Függetlenül attól, hogy a körhinta folyamatosan forog-e, vagy keményen kell-e megállnia. |
touch |
logikai érték | true |
A körhinta támogatja-e a balra/jobbra csúsztatást érintőképernyős eszközökön. |
Mód
Aszinkron módszerek és átmenetek
Minden API metódus aszinkron , és átmenetet indít . Visszatérnek a hívóhoz, amint az átmenet elkezdődik, de még azelőtt, hogy az véget érne . Ezenkívül a rendszer figyelmen kívül hagyja az átmeneti komponens metódushívásait .
További információért tekintse meg JavaScript dokumentációnkat .
Létrehozhat egy körhintapéldányt a körhinta-konstruktorral, például további beállításokkal történő inicializáláshoz, és elkezdheti az elemek közötti váltást:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Módszer | Leírás |
---|---|
cycle |
Balról jobbra körbejárja a körhinta elemeit. |
pause |
Megakadályozza, hogy a körhinta az elemek között mozogjon. |
prev |
Az előző elemre vált. Visszatér a hívóhoz, mielőtt az előző elem megjelenne (pl. az slid.bs.carousel esemény bekövetkezte előtt). |
next |
Ugrás a következő elemre. A következő elem megjelenítése előtt visszatér a hívóhoz (pl. az slid.bs.carousel esemény bekövetkezte előtt). |
nextWhenVisible |
Ne léptesse a körhinta a következőre, ha az oldal nem látható, vagy a körhinta vagy a szülője nem látható. A céltárgy megjelenítése előtt visszatér a hívóhoz |
to |
A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz). A célelem megjelenítése előtt visszatér a hívóhoz (pl. az slid.bs.carousel esemény bekövetkezte előtt). |
dispose |
Elpusztítja egy elem körhinta. (Eltávolítja a DOM elemen tárolt adatokat) |
getInstance |
Statikus módszer, amely lehetővé teszi a körhintapéldány DOM-elemhez társítását, a következőképpen használhatja:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Statikus metódus, amely egy DOM-elemhez társított körhintapéldányt ad vissza, vagy létrehoz egy újat, ha nem inicializálták. Így használhatod:bootstrap.Carousel.getOrCreateInstance(element) |
Események
A Bootstrap körhinta osztálya két eseményt tesz közzé a körhinta funkcióihoz való kapcsolódáshoz. Mindkét esemény a következő további tulajdonságokkal rendelkezik:
direction
: A körhinta csúszási iránya ("left"
vagy"right"
).relatedTarget
: Az aktív elemként a helyére csúsztatott DOM-elem.from
: Az aktuális elem indexeto
: A következő elem indexe
Minden körhinta esemény magára a körhintara (azaz a <div class="carousel">
) indul.
Esemény típus | Leírás |
---|---|
slide.bs.carousel |
slide A példánymetódus meghívásakor azonnal aktiválódik. |
slid.bs.carousel |
Akkor aktiválódik, amikor a körhinta befejezte a diaátmenetet. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})