Source

Xigwitsirisi

Xiphemu xa nkombiso wa swilayidi xo rhendzeleka hi swiaki—swifaniso kumbe swilayidi swa tsalwa—ku fana ni carousel.

Ndlela leyi swi tirhaka ha yona

Carousel i nkombiso wa swilayidi wo rhendzeleka hi ku tirhisa nxaxamelo wa swilo leswi nga endzeni, lowu akiweke hi ku hundzuka ka CSS 3D na xiphemu xa JavaScript. Yi tirha hi nxaxamelo wa swifaniso, tsalwa kumbe ku fungha loku endleriweke wena. Yi tlhela yi katsa nseketelo wa vulawuri bya khale/leswi landzelaka na swikombiso.

Eka swihlamusela-marito laha API ya ku Vonakala ka Tluka yi seketeriwaka, carousel yi ta papalata ku rhetela loko tluka ra webu ri nga vonaki eka mutirhisi (ku fana na loko thebhu ya xihlamusela-marito yi nga tirhi, fasitere ra xihlamusela-marito ri hungutiwile, na swin’wana).

Hi kombela u tiva leswaku ti carousels leti nga na swisaka a ti seketeriwi, naswona ti carousels hi ntolovelo a ti fambisani na swipimelo swa ku fikelela.

Xo hetelela, loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .

Xikombiso

Ti carousels a ti tiendli ti normalize ti slide dimensions. Hi ndlela yoleyo, u nga ha lava ku tirhisa switirhisiwa leswi engetelekeke kumbe switayele swa ntolovelo leswaku u pima swilo leswi nga endzeni hi ndlela leyi faneleke. Loko ti carousels ti seketela vulawuri bya khale/lebyi landzelaka na swikombiso, a swi laveki hi ku kongoma. Engetelani u tlhela u endla hi ku landza swilaveko swa wena hilaha u vonaka swi fanerile hakona.

Tlilasi .activeyi lava ku engeteriwa eka yin’wana ya tislaydi handle ka sweswo carousel a yi nge vonaki. Nakambe tiyisisa leswaku u veka id yo hlawuleka eka ya .carouselvulawuri byo hlawula, ngopfu-ngopfu loko u tirhisa ti-carousel to tala eka tluka rin’we. Swiaki swa vulawuri na xikombiso swi fanele ku va na data-targetxihlawulekisi (kumbe hrefxa swihlanganisi) lexi fambelanaka na id ya .carouselxiaki.

Swilayidi ntsena

Hi leyi carousel leyi nga na swilayidi ntsena. Xiya vukona bya .d-blockna .w-100eka swifaniso swa carousel ku sivela ku ringanisiwa ka swifaniso swa xiviri swa 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=".../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>

Hi swilawuri

Ku engetela eka vulawuri lebyi hundzeke ni lebyi landzelaka:

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

Hi swikombiso

U nga ha tlhela u engetela swikombiso eka carousel, etlhelo ka swilawuri, na swona.

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

Hi swifaniso leswi nga ni swifaniso

Engetelani switlhokovetselo eka swilayidi swa wena hi ku olova hi .carousel-captionelemente leyi nga endzeni ka .carousel-item. Ti nga fihliwa hi ku olova eka swivono leswitsongo, hilaha swi kombisiweke hakona laha hansi, hi switirhisiwa swo kombisa leswi nga hlawuriwa . Hi ti tumbeta eku sunguleni hi .d-noneivi hi ti vuyisa eka switirhisiwa swa le xikarhi hi .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>

Ku tsemakanya

Engetela .carousel-fadeeka carousel ya wena ku endla leswaku swilayidi swi hanya hi ku cinca ka fade ematshan’weni ya swilayidi.

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

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-slideamukela marito ya nkoka prevkumbe next, leswi cincaka xiyimo xa xilayidi loko xi pimanisiwa ni xiyimo xa xona xa sweswi. Handle ka sweswo, tirhisa data-slide-toku hundzisela xikombo xa swilayidi lexi nga si swekiwaka eka carousel data-slide-to="2", lexi cincaka ndhawu ya xilayidi ku ya eka xikombo xo karhi lexi sungulaka hi 0.

Xihlawulekisi data-ride="carousel"xi tirhisiwa ku fungha carousel tanihi animating ku sukela eka ku layicha pheji. A yi nge tirhisiwi swin’we na (ku nga laveki na loku nga lavekiki) ku sungula ka JavaScript loku nga erivaleni ka carousel yin’we.

Hi ku tirhisa JavaScript

Fonela carousel hi voko hi:

$('.carousel').carousel()

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-, tanihi le ka data-interval="".

Vito Muxaka Ku tlula Nhlamuselo
nkarhi wo leha nomboro 5000 wa vanhu Nkarhi wo hlwela exikarhi ka ku rhendzeleka ka nchumu wo karhi hi ku tisungulela. Loko ku ri mavunwa, carousel a yi nge tifambi hi yoxe.
xikhiya xa xikhiya xitsonga xitsonga ntiyiso Loko carousel yi fanele yi angula eka swiendlakalo swa khibhodi.
yimanyana ntambhu ya xirhendzevutani | xitsonga xitsonga "hover" .

Loko yi vekiwile eka "hover", yi yimisa ku rhendzeleka ka carousel eka mouseenterivi yi tlhela yi sungula ku rhendzeleka ka carousel eka mouseleave. Loko u vekiwile eka false, ku rhendzeleka ehenhla ka carousel a swi nge yi yimisi.

Eka switirhisiwa leswi pfuniwaka hi ku khumba, loko swi vekiwile eka "hover", ku famba hi xikanyakanya ku ta yimanyana ku pfula touchend(loko mutirhisi a hetile ku tirhisana na carousel) ku ringana minkarhi yimbirhi, ku nga si sungula nakambe hi ku tisungulela. Xiya leswaku leswi swi engetela eka mahanyelo ya mbeva lama nga laha henhla.
khandziya ntambu vunwa Yi tlanga hi yoxe carousel endzhaku ka loko mutirhisi a rhendzeleka hi voko nchumu wo sungula. Loko "carousel", yi autoplay carousel eka ndzhwalo.
phutsela xitsonga xitsonga ntiyiso Loko carousel yi fanele yi famba hi xikanyakanya yi ya emahlweni kumbe yi va ni swimakiwa swo tika.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala.

.carousel(options)

Ku sungula carousel hi swihlawulekisi swo hlawula objectivi a sungula ku khandziya xikanyakanya hi swilo.

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

.carousel('cycle')

Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.

.carousel('pause')

Swi yimisa carousel ku famba hi xikanyakanya hi swilo.

.carousel(number)

Ku rhendzeleka ka carousel ku ya eka furemu yo karhi (0 leyi sekeriweke, ku fana na array). Ku tlhelela eka mufoyini nchumu lowu kongomisiweke wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('prev')

Swirhendzevutana ku ya eka nchumu lowu hundzeke. Ku tlhelela eka mufoyini nchumu lowu hundzeke wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('next')

Swirhendzevutana ku ya eka nchumu lowu landzelaka. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('dispose')

Ku herisa carousel ya elemente.

Swiendlakalo

Tlilasi ya carousel ya Bootstrap yi paluxa swiendlakalo swimbirhi swo khoma eka ntirho wa carousel. Swiendlakalo leswi haswimbirhi swi na swihlawulekisi leswi landzelaka leswi engetelekeke:

  • direction: Ndlela leyi carousel yi rhetaka ha yona (kumbe "left"kumbe "right").
  • relatedTarget: Xiphemu xa DOM lexi nga eku rheleriweni endhawini ya xona tanihi nchumu lowu tirhaka.
  • from: Xikombo xa nchumu wa sweswi
  • to: Xikombo xa nchumu lowu landzelaka

Swiendlakalo hinkwaswo swa carousel swi duvuriwa eka carousel hi yoxe (i.e. eka <div class="carousel">).

Muxaka wa Xiendlakalo Nhlamuselo
xilayidi.bs.xirhendzevutani Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku slidevitaniwa ndlela ya xikombiso.
xirhendzevutani.bs.carousel Xiendlakalo lexi xi duvuriwa loko carousel yi hetile ku cinca ka yona ka swilayidi. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Cinca nkarhi wa ku cinca

Nkarhi wa ku cinca wa wu .carousel-itemnga cinciwa hi $carousel-transitionxihlawulekisi xa Sass ku nga si hlengeletiwa kumbe switayele swa ntolovelo loko u tirhisa CSS leyi hlengeletiweke. Loko ku tirhisiwa ku cinca ko tala, tiyisisa leswaku ku cinca ka ku hundzuka ku hlamuseriwa ku sungula (xikombiso transition: transform 2s ease, opacity .5s ease-out).