Téigh ar aghaidh chuig an bpríomhábhar Scipeáil chuig nascleanúint docs
Check
in English

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.

Ar an leathanach seo

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 do rialuithe agus táscairí 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.).

Tá éifeacht beochana an chomhpháirt seo ag brath ar prefers-reduced-motioncheist 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.

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 .activerang 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 idar an .carouseldo rialuithe roghnach, go háirithe má tá tú ag baint úsáide as carousels iolracha ar leathanach amháin. Caithfidh data-bs-targettréith (nó hrefle haghaidh naisc) a bheith ag eilimintí rialaithe agus táscairí a mheaitseálann idan .carouseleilimint.

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 .w-100orthu chun ailíniú íomhá réamhshocraithe an bhrabhsálaí a chosc.

html 
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

html 
<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Croschéimniú

Cuir .carousel-fadele 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-bodyCSS saincheaptha a chur leis na .carousel-items chun crosfhadú ceart a dhéanamh.

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

Cuir data-bs-interval=""le a .carousel-itemchun an méid ama le moill a athrú idir rothaíocht go huathoibríoch go dtí an chéad mhír eile.

html 
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">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-bs-touchaitreabúid. Ní fholaíonn an sampla thíos an data-bs-ridetréith freisin agus mar sin ní uathghníomhaíonn sé.

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

Leagan dorcha

Cuir .carousel-darkleis na .carouselrialuithe, táscairí agus fortheidil níos dorcha. Aisiompaíodh rialuithe óna líonadh bán réamhshocraithe le filterhairíonna CSS. Tá athróga Sass breise ag fotheidil agus rialuithe a shaincheapann an coloragus background-color.

html 
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Aistriú saincheaptha

Is féidir ré an aistrithe .carousel-itema athrú leis an $carousel-transition-durationathró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).

Sass

Athróga

Athróga do gach timpealláin:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Athróga don timpeallán dorcha :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Ú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-bs-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-bs-slide-toinnéacs amh sleamhnáin a chur ar aghaidh chuig an timpeallán data-bs-slide-to="2", a aistríonn suíomh an tsleamhnáin go hinnéacs ar leith ag tosú le 0.

Úsáidtear an data-bs-ride="carousel"tréith chun timpeallán a mharcáil mar bheochan ag tosú ag ualach an leathanaigh. Mura n-úsáideann tú data-bs-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:

const carousel = new bootstrap.Carousel('#myCarousel')

Roghanna

Toisc gur féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript, is féidir leat ainm rogha a chur i gceangal le data-bs-, mar atá i data-bs-animation="{value}". Bí cinnte cineál an cháis d’ainm na rogha a athrú ó “ camelCase ” go “ kebab-case ” agus tú ag dul thar na roghanna trí tréithe sonraí. Mar shampla, úsáid data-bs-custom-class="beautifier"in ionad data-bs-customClass="beautifier".

Amhail Bootstrap 5.2.0, tacaíonn na comhpháirteanna go léir le tréith sonraí forchoimeádta turgnamhachadata-bs-config ar féidir cumraíocht chomhpháirt shimplí a áireamh mar theaghrán JSON. data-bs-config='{"delay":0, "title":123}'Nuair a bhíonn agus tréithe ag eilimint , is é an luach data-bs-title="456"deiridh a bheidh ann agus sáróidh na tréithe sonraí ar leith na luachanna a thugtar ar . Ina theannta sin, tá tréithe sonraí atá ann cheana in ann luachanna JSON cosúil le .title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Ainm Cineál Réamhshocrú Cur síos
interval uimhir 5000 An méid ama le moill idir rothaíocht go huathoibríoch earra.
keyboard Boole true Cibé ar cheart don timpeallán freagairt d'imeachtaí méarchláir.
pause sreangán, boolean "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. Tá sé seo sa bhreis ar an iompar luch.
ride sreangán, boolean false Má shocraítear true, imríonn sé an timpeallán go huathoibríoch tar éis don úsáideoir an chéad mhír a thimthriallta de láimh. Má shocraítear "carousel", imríonn sé an timpeallán faoi ualach go huathoibríoch.
touch Boole true Cibé ar cheart don timpeallán tacú le hidirghníomhaíochtaí svaidhpeála clé/deas ar ghléasanna scáileáin tadhaill.
wrap Boole true 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 .

Is féidir leat timpeallán a chruthú leis an cruthaitheoir timpealláin, mar shampla, chun tús a chur le roghanna breise agus tosú ag rothaíocht trí mhíreanna:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Modh Cur síos
cycle Rothaíochta tríd na míreanna timpealláin ó chlé go deas.
dispose Scriosann timpealláin eilimint. (Baintear sonraí stóráilte ar an eilimint DOM)
getInstance Modh statach a ligeann duit an cás timpealláin a bhaineann le heilimint DOM a fháil, is féidir leat é a úsáid mar seo: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Modh statach a thugann cás timpealláin a bhaineann le heilimint DOM ar ais nó a chruthaíonn ceann nua ar eagla nach dtosófaí é. Is féidir leat é a úsáid mar seo: bootstrap.Carousel.getOrCreateInstance(element).
next Timthriallta go dtí an chéad mhír eile. Filleann sé ar an nglaoiteoir sula dtaispeántar an chéad mhír eile (m.sh., sula slid.bs.carouseldtarlaíonn an t-imeacht).
nextWhenVisible Ná rothaigh timpealláin go dtí an ché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 sprioc-mhír .
pause Stopann an timpeallán ó rothaíocht trí earraí.
prev Timthriallta go dtí an mhír roimhe seo. Filleann sé ar an nglaoiteoir sula dtaispeántar an mhír roimhe sin (m.sh., sula slid.bs.carouseldtarlaíonn an teagmhas).
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 mhír sprice (m.sh., sula slid.bs.carouseldtarlaíonn an teagmhas).

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
slid.bs.carousel Breoslaithe nuair a bheidh an t-aistriú sleamhnáin críochnaithe ag an timpeallán.
slide.bs.carousel Tinte láithreach nuair a úsáidtear an slidemodh ásc. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})