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

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

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.

Tlelase .activee hloka go okeletšwa go ye nngwe ya dilaete go sego bjalo carousel e ka se bonagale. Gape kgonthišetša gore o beakanya id ya moswananoši go ya .carouselbakeng sa ditaolo tša boikhethelo, kudu-kudu ge e ba o diriša di-carousel tše dintši letlakaleng le tee. Dielemente tša taolo le tša sešupo di swanetše go ba le data-targetseka (goba hrefsa dikgokagano) seo se swanago le id ya .carouselelemente.

Dilaete fela

Mona ke carousel e nang le di-slide feela. Hlokomela go ba gona ga .d-blockle .w-100go 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 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>

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

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

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>

Crossfade ya go selaganya

Oketša .carousel-fadego carousel ya gago go phediša dilaete ka phetogo ya go fifala go e na le selaete.

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

Oketša data-interval=""go a .carousel-itemgo fetoša nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela go ya go selo se se latelago.

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

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.
kgoma boolean ya go swana nnete Gore na carousel e swanetše go thekga ditirišano tša go swipa ka go le letshadi/go le letona go didirišwa tša touchscreen.

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 mošomong 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…
})

Fetola nako ya phetogo

Nako ya phetogo ya e .carousel-itemka fetolwa ka $carousel-transitionphetogo ya Sass pele ga go kgoboketša goba mekgwa ya tlwaelo ge e le gore o šomiša CSS ye e kgobokeditšwego. Ge e le gore diphetogo tše ntši di dirišwa, kgonthiša gore phetogo ya phetogo e hlalošitšwe pele (mohlala. transition: transform 2s ease, opacity .5s ease-out).