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

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. Dèan cinnteach cuideachd gun cuir thu id sònraichte air an .carouselairson smachdan roghainneil, gu sònraichte ma tha thu a’ cleachdadh ioma carousels air aon duilleag. Feumaidh data-targetfeart (no hrefairson ceanglaichean) a bhith aig eileamaidean smachd agus comharra a tha a rèir id an .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 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>

Le smachdan

A’ cur ris na smachdan roimhe agus an ath fhear:

Roimhe Air adhart

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

Le comharran

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

Roimhe Air adhart

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

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.

A 'chiad suaicheantas sleamhnag

Nulla vitae elit libero, pharetra augue mollis interdum.

An dàrna leubail sleamhnag

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

An treas leubail sleamhnag

Cleachd comodo cursus magna, no scelerisque nisl consectetur.

Roimhe Air adhart

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Cuir .carousel-faderis an carousel agad gus sleamhnagan a bheothachadh le eadar-ghluasad seargach an àite sleamhnag.

Roimhe Air adhart

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

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. 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="".

Dòighean-obrach

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

Tachartasan

Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a bhith ceangailte ri gnì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">).

$('#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).