Source

Timpealláin

Comhpháirt taispeántas sleamhnán le haghaidh rothaíocht trí eilimintí - íomhánna nó sleamhnáin téacs - cosúil le timpealláin.

Conas a oibríonn sé

Is taispeántas sleamhnán é an timpeallán le haghaidh rothaíochta trí shraith ábhar, a tógadh le trasfhoirmeacha CSS 3D agus beagán JavaScript. Oibríonn sé le sraith íomhánna, téacs, nó marcáil saincheaptha. Áiríonn sé freisin tacaíocht le haghaidh rialuithe agus táscairí a bhí ann roimhe seo/eile.

I mbrabhsálaithe ina dtacaítear leis an API Infheictheacht Leathanach , seachnóidh an timpeallán sleamhnú nuair nach bhfuil an leathanach gréasáin le feiceáil ag an úsáideoir (mar shampla nuair a bhíonn cluaisín an bhrabhsálaí neamhghníomhach, íoslaghdaítear an fhuinneog brabhsálaí, etc.).

Tabhair faoi deara, le do thoil, nach dtacaítear le timpealláin neadaithe, agus go ginearálta ní chloíonn siad leis na caighdeáin inrochtaineachta.

Ar deireadh, má tá ár JavaScript á thógáil agat ón bhfoinse, teastaíonnutil.js .

Sampla

Ní normalaíonn timpealláin toisí sleamhnáin go huathoibríoch. Mar sin, b’fhéidir go mbeadh ort fóntais bhreise nó stíleanna saincheaptha a úsáid chun méid cuí a chur ar an ábhar. Cé go dtacaíonn timpealláin le rialuithe agus táscairí roimhe seo/eile, níl siad ag teastáil go sainráite. Cuir leis agus saincheap mar is cuí leat.

Bí cinnte aitheantas uathúil a shocrú ar an .carouseldo rialuithe roghnacha, go háirithe má tá tú ag baint úsáide as carousels iolracha ar leathanach amháin.

Sleamhnáin amháin

Seo timpeallán le sleamhnáin amháin. Tabhair faoi deara láithreacht na n-íomhánna timpealláin .d-blockagus .img-fluidorthu chun ailíniú íomhá réamhshocraithe an bhrabhsálaí a chosc.

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

Le rialuithe

Ag cur na rialtáin roimhe seo agus na chéad rialuithe eile leis:

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

Le táscairí

Is féidir leat na táscairí a chur leis an timpeallán, in éineacht leis na rialuithe, freisin.

<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>
Gné ghníomhach tosaigh ag teastáil

Is gá an .activerang a chur le ceann de na sleamhnáin. Seachas sin, ní bheidh an timpeallán le feiceáil.

Le fotheidil

Cuir fotheidil le do shleamhnáin go héasca leis an .carousel-captioneilimint laistigh d'aon cheann .carousel-item. Is féidir iad a chur i bhfolach go héasca ar ionaid amhairc níos lú, mar a thaispeántar thíos, le fóntais taispeána roghnacha . Cuirimid i bhfolach iad ar dtús .d-noneagus tugaimid ar ais iad ar ghléasanna meánmhéide le .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>

Úsáid

Trí tréithe sonraí

Bain úsáid as tréithe sonraí chun suíomh an timpealláin a rialú go héasca. data-slideglacann sé leis na heochairfhocail prevnó next, a athraíonn an suíomh sleamhnáin i gcoibhneas lena shuíomh reatha. Mar mhalairt air sin, bain úsáid as data-slide-toinnéacs sleamhnán amh a chur ar aghaidh chuig an timpeallán data-slide-to="2", a aistríonn suíomh an tsleamhnáin go hinnéacs ar leith ag tosú le 0.

Úsáidtear an data-ride="carousel"tréith chun timpeallán a mharcáil mar bheochan ag tosú ag ualach an leathanaigh. Ní féidir é a úsáid i gcomhcheangal le (iomarcach agus neamhriachtanach) inisealacha JavaScript a chur in aithne don timpeallán céanna.

Trí JavaScript

Cuir glaoch ar timpealláin de láimh le:

$('.carousel').carousel()

Roghanna

Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-interval="".

Ainm Cineál Réamhshocrú Cur síos
eatramh uimhir 5000 An méid ama le moill idir rothaíocht go huathoibríoch earra. Má tá sé bréagach, ní rothóidh timpealláin go huathoibríoch.
méarchlár Boole fíor Cibé ar cheart don timpeallán freagairt d'imeachtaí méarchláir.
sos teaghrán | Boole "hover"

Má shocraítear é "hover", stopann rothaíocht an timpealláin ar aghaidh mouseenteragus athuair rothaíocht an timpealláin air mouseleave. Má tá sé socraithe go false, ní chuirfidh sé sos ar hovering thar an timpeallán é.

Ar ghléasanna tadhaill-chumasaithe, nuair a bheidh siad socraithe go "hover", stopfaidh an rothaíocht ar aghaidh touchend(a luaithe a bheidh an t-úsáideoir críochnaithe ag idirghníomhú leis an timpeallán) ar feadh dhá eatramh, sula dtosóidh sé go huathoibríoch arís. Tabhair faoi deara go bhfuil sé seo sa bhreis ar an iompar luch thuas.
marcaíocht teaghrán bréagach Imríonn sé an timpeallán go huathoibríoch tar éis don úsáideoir an chéad mhír a thimthriall de láimh. Má imríonn "timpeallán", an timpeallán faoi ualach go huathoibríoch.
wrap Boole fíor Cibé ar cheart don timpeallán rothaíocht go leanúnach nó stadanna crua a bheith aige.

Modhanna

Modhanna agus aistrithe asincrónacha

Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .

Féach ar ár gcáipéisíocht JavaScript le haghaidh tuilleadh eolais.

.carousel(options)

Tosaíonn an timpeallán le rogha roghnach objectagus tosaíonn sé ag rothaíocht trí mhíreanna.

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

.carousel('cycle')

Rothaíochta tríd na míreanna timpealláin ó chlé go deas.

.carousel('pause')

Stopann an timpeallán ó rothaíocht trí earraí.

.carousel(number)

Rothlaíonn sé an timpeallán chuig fráma ar leith (0 bunaithe, cosúil le sraith). Filleann sé ar an nglaoiteoir sula dtaispeántar an sprioc-mhír (.i. sula slid.bs.carouseldtarlaíonn an teagmhas).

.carousel('prev')

Timthriallta go dtí an mhír roimhe seo. Filleann sé ar an nglaoiteoir sula dtaispeántar an mhír roimhe seo (.i. sula slid.bs.carouseldtarlaíonn an teagmhas).

.carousel('next')

Timthriallta go dtí an chéad mhír eile. Filleann sé ar an nglaoiteoir sula dtaispeántar an chéad mhír eile (.i. sula slid.bs.carouseldtarlaíonn an t-imeacht).

.carousel('dispose')

Scriosann timpealláin eilimint.

Imeachtaí

Nochtann rang timpealláin Bootstrap dhá imeacht chun dul i ngleic le feidhmiúlacht timpealláin. Tá na hairíonna breise seo a leanas ag an dá imeacht:

  • direction: An treo ina bhfuil an timpeallán ag sleamhnú ( "left"nó "right").
  • relatedTarget: An eilimint DOM atá á sliseadh isteach mar an mhír ghníomhach.
  • from: Innéacs na míre reatha
  • to: Innéacs na chéad mhíre eile

Déantar gach imeacht timpealláin a chur ar an timpeallán féin (.i. ag an <div class="carousel">).

Cineál Imeachta Cur síos
sleamhnán.bs.carousel Téann an teagmhas seo chun cinn láithreach nuair a úsáidtear an slidemodh ásc.
slid.bs.carousel Tá an teagmhas seo bréan nuair a bhíonn an t-aistriú sleamhnáin críochnaithe ag an timpeallán. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})