Rach gu prìomh shusbaint Air adhart gu seòladh docs
Check
in English

Carousel

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

Air an duilleig seo

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.

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

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

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 comharran

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

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

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>

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.

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=""ri a .carousel-itemgus atharrachadh na h-ùine airson dàil eadar rothaireachd fèin-ghluasadach chun ath rud.

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>

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-bs-touchbhuadhan. Chan eil an eisimpleir gu h-ìosal cuideachd a’ toirt a-steach am data-bs-ridefeart agus mar sin chan eil e fèin-chluich.

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>

Caochladh dorcha

Cuir .carousel-darkris an .carouselairson smachdan, comharran, agus fo-thiotalan nas dorcha. Chaidh smachdan a thionndadh bhon lìonadh geal àbhaisteach aca le filterseilbh CSS. Tha caochladairean Sass a bharrachd aig fo-thiotalan agus smachdan a bhios a’ gnàthachadh 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>

Eadar-ghluasad gnàthaichte

Faodar an ùine gluasaid .carousel-itematharrachadh leis a’ $carousel-transition-durationchaochladair 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).

Sass

Caochlaidhean

Caochlaidhean airson a h-uile carousels:

$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`)

Caochlaidhean airson an carousel dorcha :

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

Cleachdadh

Tro fheartan dàta

Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-bs-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-bs-slide-togus clàr-amais sleamhnag amh a thoirt don charousel data-bs-slide-to="2", a ghluaiseas suidheachadh an t-sleamhnag gu clàr-amais sònraichte a’ tòiseachadh le 0.

Tha am data-bs-ride="carousel"feart air a chleachdadh gus carousel a chomharrachadh mar bheothachadh a’ tòiseachadh aig luchdachadh duilleag. Mura cleachd data-bs-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:

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

Roghainnean

Leis gum faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript, faodaidh tu ainm roghainn a chuir ri data-bs-, mar ann an data-bs-animation="{value}". Dèan cinnteach gun atharraich thu seòrsa cùis an ainm roghainn bho “ camelCase ” gu “ kebab-case ” nuair a thèid thu seachad air na roghainnean tro bhuadhan dàta. Mar eisimpleir, cleachd data-bs-custom-class="beautifier"an àite data-bs-customClass="beautifier".

Mar Bootstrap 5.2.0, tha na pàirtean uile a’ toirt taic do fheart dàta glèidhte deuchainneachdata-bs-config a dh’ fhaodas rèiteachadh phàirtean sìmplidh a chumail mar shreang JSON. Nuair a tha data-bs-config='{"delay":0, "title":123}'agus data-bs-title="456"buadhan aig eileamaid, bidh an titleluach deireannach 456agus bidh na buadhan dàta fa leth a’ dol thairis air na luachan a chaidh a thoirt seachad air data-bs-config. A bharrachd air an sin, tha na feartan dàta a th’ ann mar-thà comasach air luachan JSON mar data-bs-delay='{"show":0,"hide":150}'.

Ainm Seòrsa Deònach Tuairisgeul
interval àireamh 5000 An ùine airson dàil eadar rothaireachd gu fèin-ghluasadach air rud.
keyboard boolean true Am bu chòir don carousel freagairt a thoirt do thachartasan meur-chlàr.
pause 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. Tha seo a bharrachd air giùlan na luchaige.
ride sreang, boolean false Ma thèid a shuidheachadh gu true, cluichidh e 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.
touch boolean true Am bu chòir don carousel taic a thoirt do eadar-obrachaidhean swipe clì/deas air innealan touchscreen.
wrap boolean true Am bu chòir don charousel rothaireachd leantainneach no stadan cruaidh a bhith aige.

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 .

Faodaidh tu eisimpleir carousel a chruthachadh leis an neach-togail carousel, mar eisimpleir, gus tòiseachadh le roghainnean a bharrachd agus tòiseachadh air baidhsagal tro nithean:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Dòigh-obrach Tuairisgeul
cycle Rothaich tro na stuthan carousel bho chlì gu deas.
dispose A 'sgrios carousel eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM)
getInstance Dòigh statach a leigeas leat an t-eisimpleir carousel fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Dòigh statach a thilleas eisimpleir carousel co-cheangailte ri eileamaid DOM no a chruthaicheas fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo: bootstrap.Carousel.getOrCreateInstance(element).
next Rothaich chun an ath rud. Tilleadh chun neach-fios mus deach an ath rud a shealltainn (me, mus tachair an slid.bs.carouseltachartas).
nextWhenVisible Na rothaich carousel chun ath fhear nuair nach eil an duilleag ri fhaicinn no nuair nach eil an carousel no a phàrant ri fhaicinn. Tillidh e chun neach-fios mus deach an rud targaid a shealltainn .
pause A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean.
prev Cearcallan chun an rud roimhe. Tilleadh chun neach-fios mus deach an rud roimhe a shealltainn (me, mus tachair an slid.bs.carouseltachartas).
to 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 (me, mus tachair an slid.bs.carouseltachartas).

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

Seòrsa tachartas Tuairisgeul
slid.bs.carousel Air a losgadh nuair a tha an carousel air crìoch a chuir air a ghluasad sleamhnachaidh.
slide.bs.carousel Teine sa bhad nuair a thèid an slidedòigh eisimpleir a chleachdadh. 
const myCarousel = document.getElementById('myCarousel')

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