Carousel

In slideshow-komponint foar it fytsen troch eleminten - ôfbyldings of dia's fan tekst - lykas in karrousel.

Hoe't it wurket

De karrousel is in diashow foar it fytsen troch in searje ynhâld, boud mei CSS 3D-transformaasjes en in bytsje JavaScript. It wurket mei in searje ôfbyldings, tekst, as oanpaste markup. It omfettet ek stipe foar foarige / folgjende kontrôles en yndikatoaren.

Yn browsers dêr't de Page Visibility API wurdt stipe, sil de karrousel it glydzjen foarkomme as de webside net sichtber is foar de brûker (lykas as de blêderljepper ynaktyf is, it browserfinster wurdt minimalisearre, ensfh.).

Wês asjebleaft bewust dat nestele karrousels net wurde stipe, en karrousels binne oer it algemien net foldogge oan tagonklikensnoarmen.

As lêste, as jo ús JavaScript fan boarne bouwe, fereasketutil.js it .

Foarbyld

Carousels normalisearje diadimensjes net automatysk. As sadanich moatte jo miskien ekstra nutsbedriuwen of oanpaste stilen brûke om ynhâld op passende grutte te meitsjen. Wylst karrousels foarige / folgjende kontrôles en yndikatoaren stypje, binne se net eksplisyt ferplicht. Foegje en oanpasse as jo goed fine.

De .activeklasse moat tafoege wurde oan ien fan de dia's oars is de karrousel net sichtber. Wês ek wis dat jo in unike id ynstelle op 'e .carouselfoar opsjonele kontrôles, foaral as jo meardere karrousels op ien side brûke. Kontrôle- en yndikatoreleminten moatte in data-targetattribút hawwe (of hreffoar keppelings) dy't oerienkomt mei de id fan it .carouselelemint.

Allinnich slides

Hjir is in karrousel mei allinich dia's. Notysje de oanwêzigens fan 'e .d-blocken .w-100op carouselôfbyldings om blêder standertôfbyldingsôfstimming te foarkommen.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Mei kontrôles

De foarige en folgjende kontrôles tafoegje:

Foarige Folgjende

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

Mei yndikatoaren

Jo kinne ek de yndikatoaren tafoegje oan 'e karrousel, neist de kontrôles, ek.

Foarige Folgjende

<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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

Mei ûnderskriften

Foegje maklik titels ta oan jo dia's mei it .carousel-captionelemint yn elke .carousel-item. Se kinne maklik wurde ferburgen op lytsere viewports, lykas hjirûnder werjûn, mei opsjonele display-hulpprogramma's . Wy ferbergje se yn earste ynstânsje mei .d-noneen bringe se werom op middelgrutte apparaten mei .d-md-block.

Earste slide label

Nulla vitae elit libero, in pharetra augue mollis interdum.

Twadde slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tredde slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Foarige Folgjende

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Foegje .carousel-fadeoan jo karrousel ta om dia's te animearjen mei in fade-oergong ynstee fan in dia.

Foarige Folgjende

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

Gebrûk

Fia data attributen

Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-slideakseptearret de kaaiwurden prevof next, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-slide-toom in rûge slide-yndeks troch te jaan oan de karrousel data-slide-to="2", dy't de slideposysje ferpleatst nei in bepaalde yndeks dy't begjint mei 0.

It data-ride="carousel"attribút wurdt brûkt om in karrousel te markearjen as animaasje te begjinnen by it laden fan siden. It kin net brûkt wurde yn kombinaasje mei (oerstallige en net nedich) eksplisite JavaSkript inisjalisaasje fan deselde carousel.

Fia JavaScript

Rop karrousel manuell mei:

$('.carousel').carousel()

Opsjes

Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-, lykas yn data-interval="".

Metoaden

.carousel(options)

Inisjalisearret de karrousel mei in opsjonele opsjes objecten begjint te fytsen troch items.

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

.carousel('cycle')

Cycles troch de karrousel items fan links nei rjochts.

.carousel('pause')

Stopt de karrousel fan it fytsen troch items.

.carousel(number)

Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array). Keart werom nei de beller foardat it doelitem is werjûn (dus foardat it slid.bs.carouselevenemint bart).

.carousel('prev')

Cycles nei it foarige item. Keart werom nei de beller foardat it foarige item is toand (dus foardat it slid.bs.carouselbarren plakfynt).

.carousel('next')

Cycles nei it folgjende item. Keart werom nei de beller foardat it folgjende item is toand (dus foardat it slid.bs.carouselbarren plakfynt).

.carousel('dispose')

Ferneatiget de karrousel fan in elemint.

Eveneminten

De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit. Beide eveneminten hawwe de folgjende ekstra eigenskippen:

• direction: De rjochting wêryn't de karrousel glydt (of "left"of "right").
• relatedTarget: It DOM-elemint dat op syn plak wurdt glide as it aktive item.
• from: De yndeks fan it aktuele item
• to: De yndeks fan it folgjende item

Alle karrouseleveneminten wurde op de karrousel sels ûntslein (dus by de <div class="carousel">).

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

Feroarje oergong doer

De oergongsdoer fan .carousel-itemkin feroare wurde mei de $carousel-transitionSass-fariabele foardat jo kompilearje of oanpaste stilen as jo de kompilearre CSS brûke. As meardere transysjes wurde tapast, soargje derfoar dat de transformaasje-oergong earst definiearre is (bgl. transition: transform 2s ease, opacity .5s ease-out).