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

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.

Végül, ha forrásból készíti a JavaScriptünket, akkor ehhezutil.js .

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-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-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-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 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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

Adja .carousel-fadehozzá a körhintahoz, hogy dia helyett halványítással animálhassa a diákat. A körhinta tartalmától függően (pl. csak szöveges diák) érdemes lehet .bg-bodyegyéni CSS-t hozzáadni az .carousel-items-hez a megfelelő áthaladás érdekében.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Egyéni `.carousel-item`intervallum

Hozzáadás data-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-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-touchEz az attribútum használatával letiltható . Az alábbi példa szintén nem tartalmazza az data-rideattribútumot, data-interval="false"ezért nem játszható le automatikusan.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Használat

Adatattribútumokon keresztül

Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. data-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-slide-toa nyers diaindexet a körhintahoz data-slide-to="2", amely eltolja a dia pozícióját egy adott indexre, kezdve a -val 0.

Az data-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-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:

$('.carousel').carousel()

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-következőhöz: data-interval="".

Név	típus	Alapértelmezett	Leírás
intervallum	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.
billentyűzet	logikai érték	igaz	A körhinta reagáljon-e a billentyűzet eseményeire.
szünet	húr \| logikai érték	'lebeg'	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.
lovagol	húr	hamis	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.
betakar	logikai érték	igaz	Függetlenül attól, hogy a körhinta folyamatosan forog-e, vagy keményen kell-e megállnia.
érintés	logikai érték	igaz	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 .

`.carousel(options)`

Inicializálja a körhinta egy opcionális opcióval object, és elkezdi az elemek közötti kerékpározást.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

Balról jobbra körbejárja a körhinta elemeit.

`.carousel('pause')`

Megakadályozza, hogy a körhinta az elemek között mozogjon.

`.carousel(number)`

A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz). Visszatér a hívóhoz, mielőtt a céltárgy megjelenik (azaz az slid.bs.carouselesemény bekövetkezte előtt).

`.carousel('prev')`

Az előző elemre vált. Visszatér a hívóhoz az előző elem megjelenítése előtt (azaz az slid.bs.carouselesemény bekövetkezte előtt).

`.carousel('next')`

Ugrás a következő elemre. A következő elem megjelenítése előtt (azaz az esemény bekövetkezte előtt) visszatér a hívóhoz .slid.bs.carousel

`.carousel('dispose')`

Elpusztítja egy elem körhinta.

`.carousel('nextWhenVisible')`

Ne léptesse a körhinta a következőre, ha az oldal nem látható, vagy a körhinta vagy annak szülője nem látható. A következő elem megjelenítése előtt (azaz az esemény bekövetkezte előtt) visszatér a hívóhoz .slid.bs.carousel

`.carousel('to')`

A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz). A következő elem megjelenítése előtt (azaz az esemény bekövetkezte előtt) visszatér a hívóhoz .slid.bs.carousel

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	Ez az esemény azonnal aktiválódik, amikor a `slide`példánymetódus meghívásra kerül.
csúsztatott.bs.körhinta	Ez az esemény akkor aktiválódik, amikor a körhinta befejezte a diaátmenetet.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Az átmenet időtartamának módosítása

Az áttérés időtartama .carousel-itemmódosítható a $carousel-transitionSass 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).