Karuselli

Diaesityskomponentti, jolla voi kiertää elementtejä – kuvia tai tekstidioja – kuten karuselli.

Kuinka se toimii

Karuselli on diaesitys sisältösarjan läpi pyöräilemiseen, ja se on rakennettu CSS 3D -muunnoksilla ja hieman JavaScriptillä. Se toimii kuvasarjan, tekstin tai mukautetun merkinnän kanssa. Se sisältää myös tuen edellisille/seuraaville säätimille ja ilmaisimille.

Selaimessa, jossa sivun näkyvyyden sovellusliittymää tuetaan, karuselli välttää liukumista, kun verkkosivu ei ole käyttäjän näkyvissä (kuten kun selaimen välilehti ei ole aktiivinen, selainikkuna on pienennetty jne.).

Huomaa, että sisäkkäisiä karuselleja ei tueta, eivätkä karusellit yleensä ole esteettömyysstandardien mukaisia.

Lopuksi, jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js .

Esimerkki

Karusellit eivät normalisoi diojen mittoja automaattisesti. Sellaisenaan saatat joutua käyttämään lisäapuohjelmia tai mukautettuja tyylejä sisällön sopivan koon mitoittamiseksi. Vaikka karusellit tukevat edellisiä/seuraavia säätimiä ja ilmaisimia, niitä ei erikseen vaadita. Lisää ja muokkaa haluamallasi tavalla.

Luokka on .activelisättävä johonkin dioista, muuten karuselli ei näy. Muista myös asettaa yksilöllinen tunnus .carouselvalinnaisille säätimille, varsinkin jos käytät useita karuselleja yhdellä sivulla. Ohjaus- ja indikaattorielementeillä on oltava data-targetattribuutti (tai hreflinkeissä), joka vastaa .carouselelementin tunnusta.

Vain dioja

Tässä on karuselli, jossa on vain dioja. .d-blockHuomaa karusellikuvien ja -merkkien läsnäolo .w-100estääksesi selaimen oletuskuvan kohdistuksen.

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

Ohjainten kanssa

Edellisen ja seuraavan säätimen lisääminen:

Edellinen Seuraava

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

Indikaattorien kanssa

Voit myös lisätä ilmaisimia karuselliin ohjaimien rinnalle.

Edellinen Seuraava

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

Tekstityksillä

Lisää kuvatekstejä dioihisi helposti minkä .carousel-captiontahansa elementin avulla .carousel-item. Ne voidaan helposti piilottaa pienempiin kuvaportteihin, kuten alla on esitetty, valinnaisten näyttöapuohjelmien avulla . Piilotamme ne aluksi sovelluksella .d-noneja tuomme ne takaisin keskikokoisille laitteille -sovelluksella .d-md-block.

Ensimmäinen dian etiketti

Nulla vitae elit libero, pharetra augue mollis interdum.

Toinen dian etiketti

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kolmas dian etiketti

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Edellinen Seuraava

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

Crossfade

Lisää .carousel-fadekaruselliisi animoidaksesi dioja häivyttämällä dian sijaan.

Edellinen Seuraava

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

Käyttö

Tietomääritteiden kautta

Käytä tietoattribuutteja karusellin sijainnin hallintaan. data-slidehyväksyy avainsanat prevtai next, joka muuttaa dian sijaintia suhteessa sen nykyiseen sijaintiin. Vaihtoehtoisesti data-slide-tovoit siirtää raakadiaindeksin karuselliin data-slide-to="2", joka siirtää dian sijainnin tiettyyn hakemistoon, joka alkaa merkillä 0.

Attribuuttia data-ride="carousel"käytetään merkitsemään karuselli animaatioksi sivun latauksesta alkaen. Sitä ei voi käyttää yhdessä (redundantin ja tarpeettoman) eksplisiittisen JavaScript-alustuksen kanssa samassa karusellissa.

JavaScriptin kautta

Soita karuselliin manuaalisesti:

$('.carousel').carousel()

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-interval="".

menetelmät

.carousel(options)

Alustaa karusellin valinnaisilla vaihtoehdoilla objectja alkaa selata kohteita.

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

.carousel('cycle')

Kiertelee karusellikohteiden läpi vasemmalta oikealle.

.carousel('pause')

Estää karusellia pyöräilemästä esineiden läpi.

.carousel(number)

Kierrättää karusellin tiettyyn kehykseen (0-pohjainen, samanlainen kuin taulukko). Palaa soittajalle ennen kuin kohdekohde on näytetty (eli ennen slid.bs.carouseltapahtumaa).

.carousel('prev')

Siirtyy edelliseen kohtaan. Palaa soittajalle ennen kuin edellinen kohde on näytetty (eli ennen slid.bs.carouseltapahtumaa).

.carousel('next')

Siirtyy seuraavaan kohteeseen. Palaa soittajalle ennen kuin seuraava kohde on näytetty (eli ennen slid.bs.carouseltapahtumaa).

.carousel('dispose')

Tuhoaa elementin karusellin.

Tapahtumat

Bootstrapin karuselliluokka paljastaa kaksi tapahtumaa, jotka liittyvät karusellitoimintoihin. Molemmilla tapahtumilla on seuraavat lisäominaisuudet:

• direction: Suunta, johon karuselli liukuu (joko "left"tai "right").
• relatedTarget: DOM-elementti, joka liu'utetaan paikalleen aktiivisena kohteena.
• from: Nykyisen kohteen hakemisto
• to: Seuraavan kohteen hakemisto

Kaikki karusellitapahtumat laukaistaan ​​itse karuselliin (eli kohtaan <div class="carousel">).

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

Muuta siirtymän kestoa

Siirron kestoa .carousel-itemvoidaan muuttaa $carousel-transitionSass-muuttujalla ennen kääntämistä tai mukautetuilla tyyleillä, jos käytät käännettyä CSS:ää. Jos käytetään useita siirtymiä, varmista, että muunnossiirtymä on määritetty ensin (esim. transition: transform 2s ease, opacity .5s ease-out).