Source

Carousel ya go swara

Karolo ya pontšho ya diselaete ya go sepela ka paesekele ka gare ga dielemente—diswantšho goba dilaete tša sengwalwa—go swana le carousel.

Kamoo e šomago ka gona

Carousel ke pontšho ya diselaete ya go sepela ka paesekele ka letoto la dikagare, yeo e agilwego ka diphetogo tša CSS 3D le go se nene ga JavaScript. E šoma ka lelokelelo la diswantšho, sengwalwa, goba go swaya ga tlwaelo. E akaretša gape le thekgo ya ditaolo tša peleng/tše di latelago le ditšhupetšo.

Ka go diphensele moo API ya go Ponagala ga Letlakala e thekgwago, carousel e tla efoga go thelela ge letlakala la wepe le sa bonagale go modiriši (go swana le ge thepo ya sephephediši e sa šome, lefasetere la sephephediši le fokoditšwe, bjalobjalo).

Hle ela hloko gore di-carousel tše di tsentšwego ka gare ga sehlaga ga di thekgwe, gomme di-carousel ka kakaretšo ga di obamele maemo a phihlelelo.

Labofelo, ge e ba o aga JavaScript ya rena go tšwa mothopong, e nyakautil.js .

Mohlala

Di-carousel ga di tlwaetše ka go iketla ditekanyo tša dia. Ka ge go le bjalo, o ka swanelwa ke go šomiša didirišwa tša tlaleletšo goba mekgwa ya tlwaelo go lekanyetša diteng ka tshwanelo. Le ge di-carousel di thekga ditaolo tša peleng/tše di latelago le ditšhupetšo, ga di nyakege ka go lebanya. Oketša le go tlwaetša ka moo o bonago go swanetše.

Kgonthiša gore o beakanya id ya moswananoši go ya .carouselbakeng sa ditaolo tša boikhethelo, kudu ge e ba o diriša di-carousel tše dintši letlakaleng le tee.

Dilaete fela

Mona ke carousel e nang le di-slide feela. Hlokomela go ba gona ga .d-blockle .img-fluidgo diswantšho tša carousel go thibela go logaganya ga seswantšho sa go se fetoge sa sephephediši.

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

Ka ditaolo

Go tlaleletša ka go ditaolo tša go feta le tše di latelago:

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

Ka ditshupo

O ka boela wa tlaleletša ka ditšhupetšo go carousel, go bapa le ditaolo, le tšona.

<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>
Elemente ya mathomo ye e šomago e a nyakega

Tlelase .activee hloka go okeletšwa go ye nngwe ya dilaete. Go sego bjalo, carousel e ka se bonagale.

Ka ditlhaloso tša ditlhalošo

Oketša ditlhalošo go dilaete tša gago gabonolo ka .carousel-captionelemente ka gare ga efe goba efe .carousel-item. Di ka utollwa gabonolo go di-viewport tše dinyenyane, bjalo ka ge go bontšhitšwe ka mo tlase, ka didirišwa tša pontšho tša boikhethelo . Re di uta mathomong ka .d-nonegomme re di bušetša morago go didirišwa tša bogolo bja magareng ka .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>

Tšhomišo

Ka dika ya data

Diriša dika tša data go laola gabonolo boemo bja carousel. data-slidee amogela mantšu a bohlokwa prevgoba next, yeo e fetošago maemo a selaete ge e bapetšwa le maemo a yona a bjale. Ka go fapana le moo, šomiša data-slide-togo fetiša tšhupamabaka ya selaete ye tala go carousel data-slide-to="2", yeo e fetošago boemo bja selaete go tšhupamabaka ye e itšego yeo e thomago ka 0.

Sebopego data-ride="carousel"se šomišwa go swaya carousel bjalo ka go phela go thoma ka go rwala letlakala. E ka se šomišwe ka kopanyo le (go sa nyakege le mo go sa nyakegego) go thoma ga JavaScript mo go lego molaleng ga carousel e swanago.

Ka JavaScript

Bitsa carousel ka letsoho le:

$('.carousel').carousel()

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-interval="".

Leina Mohuta Hlokomologa Tlhalošo
sekgoba nomoro 5000 e le Palo ya nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela selo. Ge e ba e le maaka, carousel e ka se dikološe ka go iketla.
khiiboto ya boolean ya go swana nnete Gore na carousel e swanetše go arabela ditiragalong tša khiiboto.
ema nakwana thapo ya | boolean ya go swana "hover" .

Ge e beakantšwe go "hover", e emiša go sepela ga carousel ka mouseenterpaesekele gomme e thoma gape go sepela ka paesekele ya carousel godimo mouseleave. Ge e ba o beakantšwe go false, go phaphamala godimo ga carousel go ka se e khutše.

Go didirišwa tšeo di kgontšhitšwego go kgoma, ge di beakantšwe go "hover", go sepela ka dipaesekele go tla ema go šoma touchend(ge mosediriši a feditše go dirišana le carousel) ka dikgao tše pedi, pele go thoma gape ka go itiragalela. Hlokomela gore se ke tlaleletšo go boitshwaro bja toeba bjo bo lego ka mo godimo.
otlela thapo maaka Autoplays carousel ka mor'a hore mosebedisi ka letsoho potoloha ntho ea pele. Haeba "carousel", autoplays le carousel ka mojaro.
phuthela boolean ya go swana nnete Gore na carousel e swanetše go sepela ka paesekele ka mo go tšwelago pele goba e be le mafelo a thata a go ema.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego.

.carousel(options)

Initializes carousel le dikgetho boikhethelo objectle qala baesekele ka dintho.

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

.carousel('cycle')

Didikologa ka dilo tša carousel go tloga go le letshadi go ya go le letona.

.carousel('pause')

E thibela carousel go sepela ka dipaesekele ka dilo.

.carousel(number)

Cycles carousel ho foreime e itseng (0 e thehiloeng, e tšoanang le hlophisitsoeng). E boela go mogala pele ga ge selo seo se nepišitšwego se bontšhitšwe (ke gore pele ga ge slid.bs.carouseltiragalo e direga).

.carousel('prev')

Didikologo go ya go selo sa go feta. E boela go mogala pele ga ge selo sa peleng se bontšhitšwe (ke gore pele ga ge slid.bs.carouseltiragalo e direga).

.carousel('next')

Didikologo go ya go selo se se latelago. E boela go mogala pele ga ge selo se se latelago se bontšhitšwe (ke gore pele ga ge slid.bs.carouseltiragalo e direga).

.carousel('dispose')

E senya carousel ya elemente.

Ditiragalo

Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša ka mošomo wa carousel. Ditiragalo tše ka bobedi di na le dithoto tše di latelago tša tlaleletšo:

  • direction: Tsela yeo carousel e thelelago ka yona (e ka ba "left"goba "right").
  • relatedTarget: Elemente ya DOM yeo e thelelago lefelong bjalo ka selo se se šomago.
  • from: Tšhupetšo ya selo sa bjale
  • to: Tšhupetšo ya selo se se latelago

Ditiragalo ka moka tša carousel di thuntšhwa go carousel ka boyona (ke gore go <div class="carousel">).

Mohuta wa Tiragalo Tlhalošo
dia.bs.kharosele Tiragalo ye e thunya ka pela ge slidemokgwa wa mohlala o bitšwa.
go thelela.bs.kharosele Tiragalo ye e thuntšhwa ge carousel e phethile phetogo ya yona ya diselaete. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})