Source

Vrtiljak

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

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.

Nazadnje, če gradite naš JavaScript iz izvorne kode, zahtevautil.js .

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. Prav tako ne pozabite nastaviti edinstvenega ID-ja .carouselza izbirne kontrolnike, še posebej, če uporabljate več vrtiljakov na eni strani. Kontrolni in indikatorski elementi morajo imeti data-targetatribut (ali hrefza povezave), ki se ujema z ID-jem .carouselelementa.

Samo diapozitivi

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

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

S krmilniki

Dodajanje prejšnjih in naslednjih kontrolnikov:

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

Z indikatorji

Indikatorje lahko dodate tudi na vrtiljak poleg kontrolnikov.

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

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.

<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

Dodajte .carousel-fadena svoj vrtiljak, če želite animirati diapozitive z zbledelim prehodom namesto diapozitiva.

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

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

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

Uporaba

Preko podatkovnih atributov

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

Atribut data-ride="carousel"se uporablja za označevanje vrtiljaka kot animiranega, ki se začne ob nalaganju strani. Če svojega vrtiljaka ne uporabljate data-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:

$('.carousel').carousel()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-interval="".

Ime Vrsta Privzeto Opis
interval število 5000 Količina časa zakasnitve med samodejnim kroženjem elementa. Če je false, se vrtiljak ne bo samodejno vrtel.
tipkovnico logično prav Ali naj se vrtiljak odzove na dogodke na tipkovnici.
pavza niz | logično "lebdeti"

Č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. Upoštevajte, da je to poleg zgornjega vedenja miške.
vožnja vrvica lažno Samodejno predvaja vrtiljak, potem ko uporabnik ročno preklopi prvi element. Če je "vrtiljak", samodejno predvaja vrtiljak ob nalaganju.
zaviti logično prav Ali naj vrtiljak kroži neprekinjeno ali se mora močno ustaviti.
dotik logično prav Ali naj vrtiljak podpira interakcije s potegom levo/desno na napravah z zaslonom na dotik.

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 .

.carousel(options)

Inicializira vrtiljak z izbirnimi možnostmi objectin začne krožiti med elementi.

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

.carousel('cycle')

Kroži skozi elemente vrtiljaka od leve proti desni.

.carousel('pause')

Prepreči kroženje vrtiljaka med predmeti.

.carousel(number)

Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki). Vrne se klicatelju, preden je prikazan ciljni element (tj. preden se slid.bs.carouselzgodi dogodek).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

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
slide.bs.carousel Ta dogodek se sproži takoj, ko slideje priklicana metoda primerka.
slid.bs.carousel Ta dogodek se sproži, ko vrtiljak zaključi prehod diapozitivov. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Spremenite trajanje prehoda

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