Source

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

O le aafiaga o le animation o lenei vaega e fa'alagolago i le su'esu'ega a le prefers-reduced-motionaufaasālalau. Va'ai le vaega fa'aitiitiga fa'aitiitiga oa matou pepa fa'aoga avanoa .

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

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>

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. Afai e te le fa'aaogaina data-ride="carousel"e amata ai lau carousel, e tatau ona e amataina e oe lava ia. 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="".

Igoa Ituaiga Fa'atonu Fa'amatalaga
vaeluaga numera 5000 Le aofa'i o le taimi e fa'atuai ai i le va o le ta'avale otometi se mea. Afai e sese, e le otometi le taamilomilo o le carousel.
piano boolean moni Pe tatau ona tali atu le carousel i mea e tutupu i le keyboard.
taofi manoa | boolean "faapepa"

Afai e seti i le "hover", taofi le uila o le carousel i luga mouseenterma toe faaauau le uila o le carousel i luga mouseleave. Afai e seti i le false, o le faapepe i luga o le carousel e le taofia ai.

I luga o masini e mafai ona pa'i, pe a seti i le "hover", o le a taofi le uila touchend(pe a uma le tagata fa'aoga ona fegalegaleai ma le carousel) mo ni vaeluaga se lua, a'o le'i otometi ona toe amata. Manatua o lenei mea e faʻaopoopo i le amio i luga o le isumu.
tietie manoa pepelo Ta'alo otometi le carousel pe a uma ona fa'ata'amilo lima le tagata fa'aoga le mea muamua. Afai o le "carousel", e ta'alo otometi le carousel i luga o le uta.
afifi boolean moni Pe tatau ona fa'aauau le ta'amilosaga o le ta'amilosaga pe fa'agata fo'i.
pa'i boolean moni Pe o le carousel e tatau ona lagolagoina le agavale/sa'o feso'ota'iga swipe i masini lau pa'i.

Metotia

Metotia ma suiga e le tutusa

O metotia API uma e le fetaui ma amata se suiga . Latou te toe fo'i atu i le tagata telefoni i le taimi lava e amata ai le suiga ae le'i uma . E le gata i lea, o le a le amanaʻiaina se auala e valaʻau ai i se vaega o suiga .

Va'ai la matou pepa JavaScript mo nisi fa'amatalaga .

.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">).

Ituaiga Mea Fa'amatalaga
slide.bs.carousel E mu vave lenei mea pe a fa'aogaina le slideauala fa'ata'ita'i.
slid.bs.carousel E fa'amu lenei mea pe a mae'a le fa'ase'esega fa'ase'e o le 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).