Xigwitsirisi
Xiphemu xa nkombiso wa swilayidi xo rhendzeleka hi swiaki—swifaniso kumbe swilayidi swa tsalwa—ku fana ni carousel.
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
.
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.
Tiyisisa leswaku u veka id yo hlawuleka eka ya .carousel
vulawuri byo hlawula, ngopfu-ngopfu loko u tirhisa ti-carousel to tala eka tluka rin’we.
Hi leyi carousel leyi nga na swilayidi ntsena. Xiya vukona bya .d-block
na .img-fluid
eka 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="..." 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>
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="..." 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>
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="..." 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>
Xiaki xo sungula lexi tirhaka xa laveka
Tlilasi .active
yi lava ku engeteriwa eka xin’wana xa swilayidi. Handle ka sweswo, carousel a yi nge vonaki.
Engetelani switlhokovetselo eka swilayidi swa wena hi ku olova hi .carousel-caption
elemente leyi nga endzeni ka .carousel-item
. Ti nga tumbetiwa 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-none
ivi hi ti vuyisa eka switirhisiwa swa le xikarhi hi .d-md-block
.
Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-slide
amukela marito ya nkoka prev
kumbe next
, leswi cincaka xiyimo xa xilayidi loko xi pimanisiwa ni xiyimo xa xona xa sweswi. Handle ka sweswo, tirhisa data-slide-to
ku 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 yi hlanganisiwa na (ku nga laveki na loku nga lavekiki) ku sungula ka JavaScript loku nga erivaleni ka carousel yin’we.
Fonela carousel hi voko hi:
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 Eka switirhisiwa leswi pfuniwaka hi ku khumba, loko swi vekiwile eka |
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 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.
Ku sungula carousel hi swihlawulekisi swo hlawula object
ivi a sungula ku khandziya xikanyakanya hi swilo.
Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.
Swi yimisa carousel ku famba hi xikanyakanya hi swilo.
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.carousel
xiendlakalo xi nga si humelela).
Swirhendzevutana ku ya eka nchumu lowu hundzeke. Ku tlhelela eka mufoyini nchumu lowu hundzeke wu nga si kombisiwa (hileswaku slid.bs.carousel
xiendlakalo xi nga si humelela).
Swirhendzevutana ku ya eka nchumu lowu landzelaka. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (hileswaku slid.bs.carousel
xiendlakalo xi nga si humelela).
Ku herisa carousel ya elemente.
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 sweswito
: 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 slide vitaniwa ndlela ya xikombiso. |
xirhendzevutani.bs.carousel | Xiendlakalo lexi xi duvuriwa loko carousel yi hetile ku cinca ka yona ka swilayidi. |