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.

Ezen az oldalon

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.).

Ennek az összetevőnek az animációs hatása a médialekérdezéstől függ 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 .activeosztá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-targetattribútummal (vagy hrefhivatkozásoknál), amely megegyezik idaz .carouselelem jellemzőjével.

Csak diák

Itt egy körhinta csak csúszdákkal. Jegyezze meg a .d-blockés .w-100a 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-captiontetsző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-nonemajd a közepes méretű eszközökön visszahozzuk a segítségével .d-md-block.

Az első dia címke

Néhány reprezentatív helyőrző tartalom az első diához.

Második diacímke

Néhány reprezentatív helyőrző tartalom a második diához.

Harmadik dia címke

Néhány reprezentatív helyőrző tartalom a harmadik diához.

<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-fadehozzá 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-itemhogy 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-touchEz az attribútum használatával letiltható . Az alábbi példa szintén nem tartalmazza az data-bs-rideattribú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-darka .carouselsötétebb vezérlőket, jelzőket és feliratokat. A vezérlőelemek az alapértelmezett fehér kitöltést a filterCSS 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.

Az első dia címke

Néhány reprezentatív helyőrző tartalom az első diához.

Második diacímke

Néhány reprezentatív helyőrző tartalom a második diához.

Harmadik dia címke

Néhány reprezentatív helyőrző tartalom a harmadik diához.

<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-itemmódosítható a $carousel-transition-durationSass 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-slideelfogadja a prevvagy 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-toa 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 `'hover'`, szünetelteti a körhinta forgását, `mouseenter`és bekapcsolva folytatja a körhinta forgását `mouseleave`. Ha értékre van állítva `false`, az egérrel a körhinta fölé mozgatva nem szünetelteti azt. Érintésképes eszközökön, ha értékre van állítva `'hover'`, a kerékpározás két időközönként szünetel `touchend`(miután a felhasználó végzett a körhintaval), mielőtt automatikusan folytatódna. Ne feledje, hogy ez a fenti egérviselkedés mellett van.
`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 indexe
to: 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...
})

Körhinta

Hogyan működik

Példa

Csak diák

Vezérlőkkel

Mutatókkal

Feliratokkal

Az első dia címke

Második diacímke

Harmadik dia címke

Crossfade

Egyéni .carousel-itemintervallum

Az érintéses csúsztatás letiltása

Sötét változat

Az első dia címke

Második diacímke

Harmadik dia címke

Egyedi átmenet

Sass

Változók

Használat

Adatattribútumokon keresztül

JavaScripten keresztül

Lehetőségek

Mód

Aszinkron módszerek és átmenetek

Események

Egyéni `.carousel-item`intervallum