in English

Carousel

Pàirt taisbeanadh-shleamhnagan airson rothaireachd tro eileamaidean - ìomhaighean no sleamhnagan teacsa - mar carousel.

Mar a tha e ag obair

Tha an carousel na thaisbeanadh-shleamhnagan airson rothaireachd tro shreath de shusbaint, air a thogail le cruth-atharrachaidhean CSS 3D agus beagan JavaScript. Bidh e ag obair le sreath de dhealbhan, teacsa, no comharrachadh àbhaisteach. Tha e cuideachd a’ toirt a-steach taic airson smachdan agus comharran a bh’ ann roimhe/a-rithist.

Ann am brobhsairean far a bheil taic aig Page Visibility API , seachnaidh an carousel sleamhnachadh nuair nach fhaic an neach-cleachdaidh an duilleag-lìn (leithid nuair a tha taba a’ bhrobhsair neo-ghnìomhach, tha uinneag a’ bhrobhsair air a lughdachadh, msaa).

Tha buaidh beothalachd na co-phàirt seo an urra ri prefers-reduced-motionceist nam meadhanan. Faic an earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .

Thoir an aire nach eil carousels neadachaidh a’ faighinn taic, agus mar as trice chan eil carousels a’ gèilleadh ri inbhean ruigsinneachd.

Mu dheireadh, ma tha thu a 'togail ar JavaScript bhon stòr, feumaidhutil.js e .

eisimpleir

Cha bhith carousels gu fèin-ghluasadach a’ gnàthachadh meudan sleamhnachaidh. Mar sin, is dòcha gum feum thu goireasan a bharrachd no stoidhlichean àbhaisteach a chleachdadh gus susbaint a mheudachadh gu h-iomchaidh. Ged a tha carousels a’ toirt taic do smachdan agus taisbeanairean a bh’ ann roimhe / an ath rud, chan eil feum orra gu sònraichte. Cuir ris agus gnàthaich mar a chì thu iomchaidh.

Feumar an .activeclas a chur ri aon de na sleamhnagan air neo cha bhi an carousel ri fhaicinn. Cuideachd dèan cinnteach gun cuir thu feart sònraichte idair an .carouselairson smachdan roghainneil, gu sònraichte ma tha thu a’ cleachdadh ioma carousels air aon duilleag. data-targetFeumaidh buadh (no hrefairson ceanglaichean) a bhith aig eileamaidean smachd agus comharra a tha a rèir idan .carouseleileamaid.

Sleamhnagan a-mhàin

Seo carousel le sleamhnagan a-mhàin. Thoir an aire gu bheil .d-blockagus .w-100air ìomhaighean carousel gus casg a chuir air co-thaobhadh ìomhaigh bunaiteach a’ bhrobhsair.

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

Le smachdan

Cuir a-steach na smachdan roimhe agus an ath cheum. Tha sinn a’ moladh <button>eileamaidean a chleachdadh, ach faodaidh tu cuideachd <a>eileamaidean a chleachdadh le role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Le comharran

Faodaidh tu cuideachd na comharran a chur ris a 'charousel, còmhla ris na smachdan, cuideachd.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Le fo-thiotalan

Cuir fo-thiotalan ris na sleamhnagan agad gu furasta leis an .carousel-captioneileamaid taobh a-staigh faidhle .carousel-item. Faodaidh iad a bhith falaichte gu furasta air puirt-seallaidh nas lugha, mar a chithear gu h-ìosal, le goireasan taisbeanaidh roghainneil . Bidh sinn gan falach an toiseach le .d-noneagus gan toirt air ais air innealan meadhanach mòr le .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Crossfade

Cuir .carousel-faderis an carousel agad gus sleamhnagan a bheothachadh le eadar-ghluasad seargach an àite sleamhnag. A rèir an t-susbaint carousel agad (me, sleamhnagan teacsa a-mhàin), is dòcha gum bi thu airson .bg-bodyCSS àbhaisteach a chuir ris na .carousel-items airson crossfading ceart.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Cuir data-interval=""ri a .carousel-itemgus atharrachadh na h-ùine airson dàil eadar rothaireachd fèin-ghluasadach chun ath rud.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Cuir dheth suathadh suathaidh

Bidh carousels a’ toirt taic do shleamhnachadh clì / deas air innealan touchscreen gus gluasad eadar sleamhnagan. Faodar seo a chur à comas le bhith a’ cleachdadh a’ data-touchbhuadhan. Chan eil an eisimpleir gu h-ìosal cuideachd a’ toirt a-steach am data-ridefeart agus data-interval="false"mar sin chan eil e fèin-chluich.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Cleachdadh

Tro fheartan dàta

Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-slidea’ gabhail ris na prìomh fhaclan prevno next, a dh’ atharraicheas suidheachadh an t-sleamhnachaidh an coimeas ris an t-suidheachadh làithreach aige. Air an làimh eile, cleachd data-slide-togus clàr-amais sleamhnag amh a thoirt don charousel data-slide-to="2", a ghluaiseas suidheachadh an t-sleamhnag gu clàr-amais sònraichte a’ tòiseachadh le 0.

Tha am data-ride="carousel"feart air a chleachdadh gus carousel a chomharrachadh mar bheothachadh a’ tòiseachadh aig luchdachadh duilleag. Mura cleachd data-ride="carousel"thu an carousel agad a thòiseachadh, feumaidh tu a thòiseachadh thu fhèin. Chan urrainnear a chleachdadh còmhla ri (gun fheum agus neo-riatanach) a’ tòiseachadh le JavaScript soilleir den aon charousel.

Air sgàth javascript

Cuir fòn gu carousel le làimh le:

$('.carousel').carousel()

Roghainnean

Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-interval="".

Ainm Seòrsa Deònach Tuairisgeul
eadar-ama àireamh 5000 An ùine airson dàil eadar rothaireachd gu fèin-ghluasadach air rud. Ma tha false, cha bhith carousel a’ rothaireachd gu fèin-ghluasadach.
meur-chlàr boolean fìor Am bu chòir don carousel freagairt a thoirt do thachartasan meur-chlàr.
stad sreang | boolean 'hover'

Ma tha thu deiseil 'hover', stad air rothaireachd an carousel air mouseenteragus tòisich air rothaireachd an carousel air adhart mouseleave. Ma thèid a shuidheachadh gu false, cha stad thu gluasad thairis air a’ charousel.

Air innealan le comas suathaidh, nuair a thèid an suidheachadh gu 'hover', stadaidh rothaireachd air touchend(aon uair ‘s gu bheil an neach-cleachdaidh deiseil ag eadar-obrachadh leis a’ charousel) airson dà eadar-ama, mus tòisich e gu fèin-ghluasadach. Thoir an aire gu bheil seo a bharrachd air giùlan na luchaige gu h-àrd.
marcaich sreang breugach A ’cluich an carousel gu fèin-ghluasadach às deidh don neach-cleachdaidh a’ chiad rud a rothaireachd le làimh. Ma thèid a shuidheachadh gu 'carousel', cluichidh e gu fèin-ghluasadach an carousel air luchd.
pasgadh boolean fìor Am bu chòir don charousel rothaireachd leantainneach no stadan cruaidh a bhith aige.
suathadh boolean fìor Am bu chòir don carousel taic a thoirt do eadar-obrachaidhean swipe clì/deas air innealan touchscreen.

Dòighean-obrach

Modhan asyncronach agus eadar-ghluasadan

Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .

Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .

.carousel(options)

A 'tòiseachadh an carousel le roghainn roghnach objectagus a' tòiseachadh a 'rothaireachd tro nithean.

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

.carousel('cycle')

Rothaich tro na stuthan carousel bho chlì gu deas.

.carousel('pause')

A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean.

.carousel(number)

Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath). Tilleadh chun neach-fios mus deach an rud targaid a shealltainn (ie mus tachair an slid.bs.carouseltachartas).

.carousel('prev')

Cearcallan chun an rud roimhe. Tilleadh chun neach-fios mus deach an rud mu dheireadh a shealltainn (ie mus tachair an slid.bs.carouseltachartas).

.carousel('next')

Rothaich chun an ath rud. Tilleadh chun neach-fios mus deach an ath rud a shealltainn (ie mus tachair an slid.bs.carouseltachartas).

.carousel('dispose')

A 'sgrios carousel eileamaid.

.carousel('nextWhenVisible')

Na rothaich an carousel chun ath fhear nuair nach eil an duilleag ri fhaicinn no nuair nach eil an carousel no am pàrant ri fhaicinn. Tilleadh chun neach-fios mus deach an ath rud a shealltainn (ie mus tachair an slid.bs.carouseltachartas).

.carousel('to')

Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath). Tilleadh chun neach-fios mus deach an ath rud a shealltainn (ie mus tachair an slid.bs.carouseltachartas).

Tachartasan

Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a dhol a-steach do ghnìomhachd carousel. Tha na feartan a bharrachd a leanas aig an dà thachartas:

  • direction: An taobh anns a bheil an carousel a’ sleamhnachadh (an dàrna cuid "left"no "right").
  • relatedTarget: An eileamaid DOM a thathas a’ sleamhnachadh na àite mar an nì gnìomhach.
  • from: Clàr-innse an nì làithreach
  • to: Clàr-innse an ath nì

Tha a h-uile tachartas carousel air a losgadh aig a’ charousel fhèin (ie aig an <div class="carousel">).

Seòrsa Tachartas Tuairisgeul
sleamhnachadh.bs.carousel Bidh an tachartas seo a’ losgadh sa bhad nuair a thèid an slidedòigh eisimpleir a chleachdadh.
slid.bs.carousel Tha an tachartas seo air a losgadh nuair a tha an carousel air crìoch a chuir air a ghluasad sleamhnag. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Atharraich an ùine gluasaid

Faodar an ùine gluasaid .carousel-itematharrachadh leis a’ $carousel-transitionchaochladair Sass mus cuir thu ri chèile no stoidhlichean àbhaisteach ma tha thu a’ cleachdadh an CSS cruinnichte. Ma thèid ioma-ghluasadan a chuir an sàs, dèan cinnteach gu bheil an eadar-ghluasad cruth-atharrachaidh air a mhìneachadh an toiseach (me. transition: transform 2s ease, opacity .5s ease-out).