Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
in English

Vrtiljak

Komponenta diaprojekcije za kroženje med elementi – slikami ali diapozitivi besedila – kot vrtiljak.

Na tej strani

Kako deluje

Vrtiljak je diaprojekcija za kolesarjenje skozi vrsto vsebine, zgrajena s 3D-transformacijami CSS in malo JavaScripta. Deluje z vrsto slik, besedilom ali oznakami po meri. Vključuje tudi podporo za prejšnje/naslednje kontrole in indikatorje.

V brskalnikih, kjer je podprt API za vidnost strani , se bo vrtiljak izognil drsenju, ko spletna stran uporabniku ni vidna (na primer, ko je zavihek brskalnika neaktiven, okno brskalnika pomanjšano itd.).

Učinek animacije te komponente je odvisen od prefers-reduced-motionmedijske poizvedbe. Oglejte si razdelek o zmanjšanem gibanju v naši dokumentaciji o dostopnosti .

Zavedajte se, da ugnezdeni vrtiljaki niso podprti in da vrtiljaki na splošno niso skladni s standardi dostopnosti.

Primer

Vrtiljaki ne normalizirajo samodejno dimenzij diapozitivov. Zato boste morda morali uporabiti dodatne pripomočke ali sloge po meri za ustrezno velikost vsebine. Čeprav vrtiljaki podpirajo prejšnje/naslednje kontrole in indikatorje, niso izrecno potrebni. Dodajte in prilagodite, kot se vam zdi primerno.

Razred .activeje treba dodati enemu od diapozitivov, sicer vrtiljak ne bo viden. Prepričajte se tudi, da nastavite edinstveno idza .carouselizbirne kontrolnike, še posebej, če uporabljate več vrtiljakov na eni strani. Kontrolni in indikatorski elementi morajo imeti data-bs-targetatribut (ali hrefza povezave), ki se ujema idz .carouselelementom.

Samo diapozitivi

Tukaj je vrtiljak samo z diapozitivi. Upoštevajte prisotnost slik .d-blockin .w-100na vrtiljaku, da preprečite privzeto poravnavo slik brskalnika.

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>

S krmilniki

Dodajanje prejšnjih in naslednjih kontrolnikov. Priporočamo uporabo <button>elementov, vendar lahko uporabite tudi <a>elemente z 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>

Z indikatorji

Indikatorje lahko dodate tudi na vrtiljak poleg kontrolnikov.

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>

Z napisi

Svojim diapozitivom preprosto dodajte napise z .carousel-captionelementom znotraj katerega koli .carousel-item. Z izbirnimi prikazovalnimi pripomočki jih je mogoče enostavno skriti na manjših pogledih, kot je prikazano spodaj . Sprva jih skrijemo z .d-nonein jih na srednje velikih napravah vrnemo z .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

Dodajte .carousel-fadena svoj vrtiljak, če želite animirati diapozitive z zbledelim prehodom namesto diapozitiva. Odvisno od vaše vsebine vrtiljaka (npr. diapozitivi samo z besedilom) boste morda želeli dodati .bg-bodyCSS po meri .carousel-itemza ustrezno navzkrižno prelivanje.

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>

Dodajte data-bs-interval=""v a .carousel-item, da spremenite količino časa za zakasnitev med samodejnim preklapljanjem na naslednji element.

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>

Onemogoči drsenje na dotik

Vrtiljaki podpirajo drsenje levo/desno na napravah z zaslonom na dotik za premikanje med diapozitivi. To lahko onemogočite z data-bs-touchatributom. Spodnji primer tudi ne vključuje data-bs-rideatributa, zato se ne predvaja samodejno.

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>

Temna varianta

Dodajte .carousel-darkza .carouseltemnejše kontrolnike, indikatorje in napise. Kontrolniki so bili spremenjeni s privzetega belega polnila z filterlastnostjo CSS. Napisi in kontrolniki imajo dodatne spremenljivke Sass, ki prilagodijo colorin 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>

Prehod po meri

Trajanje prehoda .carousel-itemlahko spremenite s $carousel-transition-durationspremenljivko Sass pred prevajanjem ali slogi po meri, če uporabljate preveden CSS. Če je uporabljenih več prehodov, se prepričajte, da je najprej definiran transformacijski prehod (npr. transition: transform 2s ease, opacity .5s ease-out).

Sass

Spremenljivke

Spremenljivke za vse vrtiljake:

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

Spremenljivke za temni vrtiljak :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Uporaba

Preko podatkovnih atributov

Uporabite atribute podatkov za preprost nadzor položaja vrtiljaka. data-bs-slidesprejme ključne besede prevali next, ki spremenijo položaj diapozitiva glede na trenutni položaj. Druga možnost je, da uporabite data-bs-slide-toza posredovanje neobdelanega indeksa diapozitiva na vrtiljak data-bs-slide-to="2", ki premakne položaj diapozitiva na določen indeks, ki se začne z 0.

Atribut data-bs-ride="carousel"se uporablja za označevanje vrtiljaka kot animiranega, ki se začne ob nalaganju strani. Če svojega vrtiljaka ne uporabljate data-bs-ride="carousel"za inicializacijo, ga morate inicializirati sami. Ni ga mogoče uporabiti v kombinaciji z (odvečno in nepotrebno) eksplicitno inicializacijo JavaScript istega vrtiljaka.

Prek JavaScripta

Ročno pokličite vrtiljak z:

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

Opcije

Ker je možnosti mogoče posredovati prek podatkovnih atributov ali JavaScripta, lahko dodate ime možnosti v data-bs-, kot v data-bs-animation="{value}". Prepričajte se, da ste spremenili vrsto malega črke imena možnosti iz " camelCase " v " kebab-case ", ko posredujete možnosti prek podatkovnih atributov. Na primer, uporabite data-bs-custom-class="beautifier"namesto data-bs-customClass="beautifier".

Od Bootstrap 5.2.0 naprej vse komponente podpirajo poskusni atribut rezerviranih podatkov, data-bs-configki lahko hrani preprosto konfiguracijo komponente kot niz JSON. Ko ima element atribute data-bs-config='{"delay":0, "title":123}'in data-bs-title="456", bo končna titlevrednost 456in ločeni atributi podatkov bodo preglasili vrednosti, podane na data-bs-config. Poleg tega lahko obstoječi atributi podatkov hranijo vrednosti JSON, kot je data-bs-delay='{"show":0,"hide":150}'.

Ime Vrsta Privzeto Opis
interval število 5000 Količina časa zakasnitve med samodejnim kroženjem elementa.
keyboard logično true Ali naj se vrtiljak odzove na dogodke na tipkovnici.
pause niz, logična vrednost "hover" Če je nastavljeno na "hover", začasno ustavi kroženje vrtiljaka na mouseenterin nadaljuje s kroženjem vrtiljaka na mouseleave. Če je nastavljeno na false, se s kazalcem miške nad vrtiljakom ne zaustavite. Ko je na napravah z omogočenim dotikom nastavljeno na "hover", se bo kolesarjenje zaustavilo touchend(ko uporabnik konča interakcijo z vrtiljakom) za dva intervala, nato pa se samodejno nadaljuje. To je poleg vedenja miške.
ride niz, logična vrednost false Če je nastavljeno na true, samodejno predvaja vrtiljak, potem ko uporabnik ročno preklopi prvi element. Če je nastavljeno na "carousel"samodejno predvaja vrtiljak ob nalaganju.
touch logično true Ali naj vrtiljak podpira interakcije s potegom levo/desno na napravah z zaslonom na dotik.
wrap logično true Ali naj vrtiljak kroži neprekinjeno ali se mora močno ustaviti.

Metode

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Primerek vrtiljaka lahko na primer ustvarite s konstruktorjem vrtiljaka, da ga inicializirate z dodatnimi možnostmi in začnete krožiti po elementih:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metoda Opis
cycle Kroži skozi elemente vrtiljaka od leve proti desni.
dispose Uniči vrtiljak elementa. (Odstrani shranjene podatke v elementu DOM)
getInstance Statično metodo, ki vam omogoča pridobitev primerka vrtiljaka, povezanega z elementom DOM, jo lahko uporabite takole: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Statična metoda, ki vrne primerek vrtiljaka, povezan z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole: bootstrap.Carousel.getOrCreateInstance(element).
next Preklopi na naslednji element. Vrne se k klicatelju, preden je prikazan naslednji element (npr. preden se slid.bs.carouselzgodi dogodek).
nextWhenVisible Ne premikajte vrtiljaka na naslednjo, če stran ni vidna ali vrtiljak ali njegov nadrejeni element ni viden. Vrne se k klicatelju, preden je prikazan ciljni predmet .
pause Prepreči kroženje vrtiljaka med predmeti.
prev Preklopi na prejšnji element. Vrne se k klicatelju, preden je prikazan prejšnji element (npr. preden se slid.bs.carouselzgodi dogodek).
to Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki). Vrne se klicatelju, preden je ciljni element prikazan (npr. preden se slid.bs.carouselzgodi dogodek).

Dogodki

Bootstrapov razred vrtiljaka izpostavlja dva dogodka za priključitev na funkcijo vrtiljaka. Oba dogodka imata naslednje dodatne lastnosti:

  • direction: Smer, v katero drsi vrtiljak ( "left"ali "right").
  • relatedTarget: Element DOM, ki je potisnjen na svoje mesto kot aktivni element.
  • from: Indeks trenutnega predmeta
  • to: Indeks naslednjega elementa

Vsi dogodki vrtiljaka se sprožijo na samem vrtiljaku (tj. na <div class="carousel">).

Vrsta dogodka Opis
slid.bs.carousel Sproži se, ko je vrtiljak zaključil svoj drsni prehod.
slide.bs.carousel Sproži se takoj, ko slideje priklicana metoda primerka. 
const myCarousel = document.getElementById('myCarousel')

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