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.

Ia mautinoa e seti se id tulaga ese i luga o le .carouselmo le fa'atonuga, aemaise lava pe a e fa'aogaina le tele o carousels i luga o le itulau e tasi.

Na'o fa'ase'e

O le carousel lea e na'o fa'ase'e. Fa'ailoa le iai o ata .d-blockma .img-fluidluga 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 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>

Faatasi ai ma pulega

Faʻaopoopo i le pule muamua ma le isi:

Muamua Sosoo ai

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

Faatasi ai ma faailoga

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

Muamua Sosoo ai

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

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.

Fa'ailoga fa'ase'e muamua

Nulla vitae elit libero, a pharetra augue mollis interdum.

Fa'ailoga fa'asolo lona lua

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fa'ailoga fa'asolo lona tolu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Muamua Sosoo ai

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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…
})