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.).
prefers-reduced-motion
cheist na meán. Féach an
rannán tairiscint laghdaithe dár gcáipéisíocht inrochtaineachta .
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.
Ní mór an .active
rang a chur le ceann de na sleamhnáin nó ní bheidh an timpeallán le feiceáil. Chomh maith leis sin a bheith cinnte a shocrú ar leith id
ar an .carousel
do rialuithe roghnach, go háirithe má tá tú ag baint úsáide as carousels iolracha ar leathanach amháin. Caithfidh data-target
tréith (nó href
le haghaidh naisc) a bheith ag eilimintí rialaithe agus táscairí a mheaitseálann id
an .carousel
eilimint.
Sleamhnáin amháin
Seo timpeallán le sleamhnáin amháin. Tabhair faoi deara láithreacht na n-íomhánna timpealláin .d-block
agus .w-100
orthu 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 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 rialuithe
Ag cur isteach na rialuithe roimhe seo agus an chéad cheann eile. Molaimid <button>
eilimintí a úsáid, ach is féidir leat <a>
eilimintí a úsáid freisin 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 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 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 fotheidil
Cuir fotheidil le do shleamhnáin go héasca leis an .carousel-caption
eilimint 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-none
agus tugaimid ar ais iad ar ghléasanna meánmhéide 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>
Croschéimniú
Cuir .carousel-fade
le do timpeallán chun sleamhnáin a bheochan le trasdul céimnithe in ionad sleamhnán. Ag brath ar an ábhar timpealláin atá agat (m.sh., sleamhnáin téacs amháin), b'fhéidir gur mhaith leat .bg-body
CSS saincheaptha a chur leis na .carousel-item
s chun crosfhadú ceart a dhéanamh.
<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>
.carousel-item
Eatramh aonair
Cuir data-interval=""
le a .carousel-item
chun an méid ama le moill a athrú idir rothaíocht go huathoibríoch go dtí an chéad mhír eile.
<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>
Díchumasaigh swiping tadhaill
Tacaíonn timpealláin le sleamhnú clé/deas ar ghléasanna scáileáin tadhaill chun bogadh idir sleamhnáin. Is féidir é seo a dhíchumasú ag baint úsáide as an data-touch
aitreabúid. Ní fholaíonn an sampla thíos an data-ride
tréith ach oiread agus data-interval="false"
mar sin ní dhéanann sé uath-imirt.
<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>
Úsáid
Trí tréithe sonraí
Úsáid tréithe sonraí chun suíomh an timpealláin a rialú go héasca. data-slide
glacann sé leis na heochairfhocail prev
nó 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-to
innéacs amh sleamhnáin 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. Mura n-úsáideann tú data-ride="carousel"
do timpealláin a thúsú, caithfidh tú é a thosú tú féin. Ní féidir é a úsáid in éineacht le (iomarcach agus neamhriachtanach) inisealacha JavaScript a chur in aithne don timpeallán céanna.
Trí JavaScript
Glaoigh 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ás rud é false , ní bheidh timpealláin ag rothaíocht 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 é Ar ghléasanna tadhaill-chumasaithe, nuair a bheidh siad socraithe go |
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á shocraítear 'carousel' , imríonn sé 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. |
teagmháil | Boole | fíor | Cibé ar cheart don timpeallán tacú le hidirghníomhaíochtaí svaidhpeála clé/deas ar ghléasanna scáileáin tadhaill. |
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir chomh luath agus 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 object
agus 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.carousel
dtarlaí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.carousel
dtarlaí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.carousel
dtarlaíonn an t-imeacht).
.carousel('dispose')
Scriosann timpealláin eilimint.
.carousel('nextWhenVisible')
Ná rothaigh an timpeallán chuig an gcéad cheann eile nuair nach bhfuil an leathanach le feiceáil nó nuair nach bhfuil an timpeallán nó a thuismitheoir le feiceáil. Filleann sé ar an nglaoiteoir sula dtaispeántar an chéad mhír eile (.i. sula slid.bs.carousel
dtarlaíonn an t-imeacht).
.carousel('to')
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 chéad mhír eile (.i. sula slid.bs.carousel
dtarlaíonn an t-imeacht).
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 reathato
: 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 slide modh á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...
})
Athraigh ré an aistrithe
Is féidir ré an aistrithe .carousel-item
a athrú leis an $carousel-transition
athróg Sass sula dtiomsaítear nó roimh stíleanna saincheaptha má tá an CSS tiomsaithe á úsáid agat. Má chuirtear trasdulta iolracha i bhfeidhm, cinntigh go sainítear an trasdul trasfhoirmithe ar dtús (eg. transition: transform 2s ease, opacity .5s ease-out
).