Carousel

O se vaega fa'ata'ita'i mo le ta'amilosaga i elemene—ata po'o fa'ase'e o tusitusiga—pei o se carousel.

E faapefea ona galue

O le carousel o se faʻataʻitaʻiga mo le uila e ala i se faasologa o anotusi, fausia i le CSS 3D transforms ma sina JavaScript. E galue i se faasologa o ata, tusitusiga, poʻo faʻailoga masani. E aofia ai foʻi le lagolago mo faʻatonuga muamua / sosoʻo ma faʻailoga.

I su'esu'ega o lo'o lagolagoina ai le Itulau Visibility API , o le carousel o le a 'alofia le fa'ase'e pe a le va'aia e le tagata fa'aoga le itulau i luga ole laiga (pei o le taimi e le gaioi ai le itulau su'esu'e, fa'aitiitia le fa'amalama o le su'esu'ega, ma isi).

Fa'amolemole ia nofouta e le'o lagolagoina fo'i ta'avale faga, ma e masani fo'i ona le ogatasi ma ta'iala fa'aoga.

I le mea mulimuli, afai o loʻo e fausiaina la matou JavaScript mai le puna, e manaʻomiautil.js .

Faataitaiga

E le otometi ona fa'avasega e ta'avale fa'ase'e fua. E pei o lea, atonu e te manaʻomia le faʻaogaina o mea faʻaoga faaopoopo poʻo sitaili masani e faʻatatau i le tele o mea. A'o lagolagoina e carousels pulega ma fa'ailoga muamua/so'o mai, e le'o mana'omia manino. Fa'aopoopo ma fa'avasega pe a e mana'o e fetaui.

E .activemana'omia le fa'aopoopoina o le vasega i se tasi o fa'ata'ita'i a leai o le a le mafai ona iloa le ta'avale. Ia mautinoa foi e seti se id tulaga ese i luga o le .carouselmo le pule faitalia, aemaise lava pe afai o loʻo e faʻaogaina le tele o carousels i luga o le itulau e tasi. O elemene fa'atonutonu ma fa'ailoga e tatau ona iai se data-targetuiga (po'o hrefso'otaga) e fetaui ma le id o le .carouselelemene.

Na'o fa'ase'e

O le carousel lea e na'o fa'ase'e. Fa'ailoa le iai o ata .d-blockma .w-100luga o le carousel e taofia ai le fa'aogaina o ata o le browser.

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

Faatasi ai ma pulega

Faʻaopoopo i le pule muamua ma le isi:

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

Faatasi ai ma faailoga

E mafai fo'i ona e fa'aopoopo fa'ailoga ile carousel, fa'atasi ma fa'atonuga.

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

Fa'atasi ai ma fa'amatalaga

Fa'aopoopo fa'amatalaga i au fa'ase'e faigofie ma le .carousel-captionelemene i totonu o so'o se .carousel-item. E mafai ona faigofie ona natia i luga o vaʻaiga laiti, e pei ona faʻaalia i lalo, faʻatasi ai ma mea faʻaoga faʻaalia . Matou te nanaina muamua .d-nonema toe aumai i luga o masini lapopoa ma .d-md-block.

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

Fa'ase'e

Fa'aopoopo .carousel-fadei lau carousel e fa'aola ata fa'ase'e fa'atasi ai ma se suiga fa'ase'e nai lo se fa'ase'e.

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

.carousel-itemVaeluaga ta'ito'atasi

Fa'aopoopo data-interval=""i le a .carousel-iteme sui ai le aofa'i o le taimi e fa'atuai ai i le va o le uila fa'afuase'i i le isi mea.

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

Fa'aoga

E ala i fa'amaumauga uiga

Fa'aoga uiga fa'amaumauga e faigofie ai ona pulea le tulaga o le carousel. data-slidetalia upu autu prevpo'o next, lea e suia ai le tulaga fa'ase'e fa'atatau i lona tulaga o iai nei. I le isi itu, fa'aaoga data-slide-toe pasi ai se fa'ailoga fa'ase'e mata'utia i le carousel data-slide-to="2", lea e sui ai le tulaga fa'ase'e i se fa'ailoga fa'apitoa e amata i le 0.

O le data-ride="carousel"uiga e fa'aoga e fa'ailoga ai se carousel e fa'aola e amata ile utaina o itulau. E le mafai ona fa'aogaina fa'atasi ma (e le toe mana'omia) fa'amatagofie le JavaScript o le carousel e tasi.

E ala i le JavaScript

Valaau ma le lima le carousel ma:

$('.carousel').carousel()

Filifiliga

O filifiliga e mafai ona pasia e ala i faʻamatalaga uiga poʻo le JavaScript. Mo fa'amatalaga uiga, fa'aopoopo le igoa filifiliga i le data-, pei o le data-interval="".

Metotia

.carousel(options)

Fa'amataina le carousel i se filifiliga e filifili objectma amata ai le uila i mea.

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

.carousel('cycle')

Taamilomilo i aitema carousel mai le agavale i le taumatau.

.carousel('pause')

Taofi le carousel mai le tietie uila i aitema.

.carousel(number)

Ta'amilomilo le carousel i se fa'avaa fa'apitoa (fa'avae 0, pei o se fa'asologa). Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea fa'atatau (fa'atusa a'o le'i tupu le slid.bs.carouselmea na tupu).

.carousel('prev')

Ta'amilosaga i le mea muamua. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le mea muamua (fa'atusa a'o le'i tupu le slid.bs.carouselmea na tupu).

.carousel('next')

Taamilo i le isi mea. Toe fo'i i le tagata vala'au a'o le'i fa'aalia le isi aitema (fa'atusa a'o le'i tupu le slid.bs.carouselmea na tupu).

.carousel('dispose')

Fa'aleagaina le carousel o se elemene.

Mea na tutupu

O le vasega carousel a Bootstrap o lo'o fa'aalia ai mea e lua mo le fa'aogaina o galuega fa'aoga. O mea tutupu uma e lua e iai mea fa'aopoopo nei:

• direction: Le itu o lo'o fa'ase'e ai le carousel ( "left"po'o le "right").
• relatedTarget: O le elemene DOM o loʻo faʻasolo i totonu o le mea o loʻo galue.
• from: Le faasino igoa o le mea o iai nei
• to: Le faasino igoa o le mea e sosoo ai

O mea uma e tutupu i le carousel e fa'amu i le carousel lava ia (ie i le <div class="carousel">).

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

Suia le umi o suiga

Ole umi ole suiga ole .carousel-itemmafai ona suia ile $carousel-transitionfesuiaiga Sass a'o le'i tu'ufa'atasia po'o sitaili masani pe afai o lo'o e fa'aogaina le CSS tu'ufa'atasi. Afai e tele suiga e fa'aaogaina, ia mautinoa o le suiga o le suiga e fa'amalamalama muamua (fa'ata'ita'iga transition: transform 2s ease, opacity .5s ease-out).