Karussell

Slaidiseansi komponent elementide (piltide või tekstislaidide) vahel liikumiseks nagu karussell.

Kuidas see töötab

Karussell on CSS-i 3D-teisenduste ja natukese JavaScripti abil üles ehitatud slaidiseanss, mis võimaldab liikuda läbi sisusarja. See töötab piltide, teksti või kohandatud märgistusega. See hõlmab ka eelmiste/järgmiste juhtelementide ja indikaatorite tuge.

Brauserites, kus lehe nähtavuse API on toetatud, väldib karussell libisemist, kui veebileht pole kasutajale nähtav (nt kui brauseri vahekaart on passiivne, brauseriaken on minimeeritud jne).

Pange tähele, et pesastatud karusselle ei toetata ja karussellid ei järgi üldiselt juurdepääsetavuse standardeid.

Lõpuks, kui loote meie JavaScripti allikast, nõuabutil.js see .

Näide

Karussellid ei normaliseeri automaatselt slaidi mõõtmeid. Seetõttu peate võib-olla kasutama täiendavaid utiliite või kohandatud stiile, et sisu sobivat suurust muuta. Kuigi karussellid toetavad eelmisi/järgmisi juhtelemente ja indikaatoreid, pole need otseselt nõutavad. Lisage ja kohandage oma äranägemise järgi.

Määrake valikuliste juhtelementide jaoks kindlasti kordumatu ID .carousel, eriti kui kasutate ühel lehel mitut karusselli.

Ainult slaidid

Siin on ainult slaididega karussell. Pange tähele, et karussellikujutistel on tähised .d-blockja .img-fluid, et vältida brauseri kujutiste vaikejoondamist.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Juhtseadmetega

Eelmiste ja järgmiste juhtelementide lisamine:

Eelmine Edasi

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

Näitajatega

Lisaks juhtnuppudele saate karussellile lisada ka indikaatoreid.

Eelmine Edasi

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

Koos pealdistega

Lisage oma slaididele hõlpsasti pealdisi .carousel-captionelemendiga mis tahes .carousel-item. Neid saab valikuliste kuvautiliitidega hõlpsasti väiksematesse vaateavadesse peita, nagu allpool näidatud . Peidame need algselt rakendusega .d-noneja toome need tagasi keskmise suurusega seadmetele .d-md-block.

Esimese slaidi silt

Nulla vitae elit libero, a pharetra augue mollis interdum.

Teise slaidi silt

Lorem ipsum dolor sit amet, consectetur adipiscing eliit.

Kolmas slaidi silt

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Eelmine Edasi

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

Kasutamine

Andmeatribuutide kaudu

Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slideaktsepteerib märksõnu prevvõi next, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-slide-totöötlemata slaidiindeksi edastamiseks karussellile data-slide-to="2", mis nihutab slaidi positsiooni konkreetsele registrile, mis algab tähega 0.

Atribuuti data-ride="carousel"kasutatakse karusselli märgistamiseks animeerivaks alates lehe laadimisest. Seda ei saa kasutada koos (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega sama karusselli puhul.

JavaScripti kaudu

Helistage karusselli käsitsi, kasutades:

$('.carousel').carousel()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-interval="".

meetodid

.carousel(options)

Lähtestab karusselli valikuliste valikutega objectja hakkab üksuste vahel ringi liikuma.

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

.carousel('cycle')

Liigub läbi karusselli üksuste vasakult paremale.

.carousel('pause')

Peatab karusselli esemete vahel liikumise.

.carousel(number)

Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga). Naaseb helistaja juurde enne sihtüksuse näitamist (st enne slid.bs.carouselsündmuse toimumist).

.carousel('prev')

Liigub eelmise üksuse juurde. Naaseb helistaja juurde enne eelmise üksuse näitamist (st enne slid.bs.carouselsündmuse toimumist).

.carousel('next')

Liigub järgmise üksuse juurde. Naaseb helistaja juurde enne järgmise üksuse näitamist (st enne slid.bs.carouselsündmuse toimumist).

.carousel('dispose')

Hävitab elemendi karusselli.

Sündmused

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks. Mõlemal sündmusel on järgmised lisaomadused:

• direction: suund, milles karussell libiseb (kas "left"või "right").
• relatedTarget: DOM-element, mis libistatakse aktiivse üksusena oma kohale.
• from: praeguse üksuse indeks
• to: järgmise üksuse register

Kõik karussellisündmused käivitatakse karusselli enda (st <div class="carousel">) suunas.

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