Source

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ó. Ügyeljen arra is, hogy egyedi azonosítót állítson be az .carouselopcionális vezérlőkhöz, különösen akkor, 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 az .carouselelem azonosítójával.

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:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 hamis, 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 „körhinta”, automatikusan lejátssza a körhintat 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.

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