Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
Check
in English

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-el épített. 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 kis méretűre van állítva 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.

html 
<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".

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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. 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.

html 
<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>

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.

html 
<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, így nem játszható le automatikusan.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

html 
<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

Változók az összes körhintahoz:

$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`)

A sötét körhinta változói :

$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ővel:

const carousel = new bootstrap.Carousel('#myCarousel')

Lehetőségek

Mivel az opciók átadhatók adatattribútumokon vagy JavaScript-en keresztül, hozzáfűzhet egy beállításnevet a -hoz data-bs-, mint például a data-bs-animation="{value}". Ügyeljen arra, hogy az opció nevének esettípusát „ camelCase ”-ról „ kebab-case ”-re változtassa, amikor a beállításokat adatattribútumokon keresztül adja át. Például használja data-bs-custom-class="beautifier"a helyett data-bs-customClass="beautifier".

A Bootstrap 5.2.0-tól kezdve minden összetevő támogatja a kísérleti fenntartott adatattribútumot, data-bs-configamely JSON-karakterláncként tartalmazhat egyszerű összetevőkonfigurációt. Ha egy elemnek data-bs-config='{"delay":0, "title":123}'és data-bs-title="456"attribútumai vannak, a végső titleérték a következő lesz, 456és a különálló adatattribútumok felülírják a megadott értékeket data-bs-config. Ezenkívül a meglévő adatattribútumok JSON-értékeket, például data-bs-delay='{"show":0,"hide":150}'.

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.
keyboard logikai érték true A körhinta reagáljon-e a billentyűzet eseményeire.
pause karakterlánc, logikai "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. Ez az egér viselkedése mellett van.
ride karakterlánc, logikai false Ha értékre van állítva true, akkor automatikusan lejátssza a körhinta, miután a felhasználó manuálisan váltotta az első elemet. Ha értékre van állítva "carousel", automatikusan lejátssza a körhinta betöltéskor.
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.
wrap logikai érték true Függetlenül attól, hogy a körhinta folyamatosan forog-e, vagy keményen kell-e megállnia.

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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Módszer Leírás
cycle Balról jobbra körbejárja a körhinta elemeit.
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 Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element).
next Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs).
nextWhenVisible Don’t cycle carousel to next when the page isn’t visible or the carousel or its parent isn’t visible. Returns to the caller before the target item has been shown.
pause Stops the carousel from cycling through items.
prev Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs).
to Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs).

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type Description
slid.bs.carousel Fired when the carousel has completed its slide transition.
slide.bs.carousel Fires immediately when the slide instance method is invoked. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})