Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
in English

Carwsél

Elfen sioe sleidiau ar gyfer beicio trwy elfennau - delweddau neu sleidiau o destun - fel carwsél.

Ar y dudalen hon

Sut mae'n gweithio

Mae'r carwsél yn sioe sleidiau ar gyfer beicio trwy gyfres o gynnwys, wedi'i adeiladu gyda thrawsnewidiadau CSS 3D ac ychydig o JavaScript. Mae'n gweithio gyda chyfres o ddelweddau, testun, neu farcio personol. Mae hefyd yn cynnwys cefnogaeth ar gyfer rheolaethau a dangosyddion blaenorol/nesaf.

Mewn porwyr lle mae'r API Gwelededd Tudalen yn cael ei gefnogi, bydd y carwsél yn osgoi llithro pan nad yw'r dudalen we yn weladwy i'r defnyddiwr (fel pan fydd tab y porwr yn anactif, ffenestr y porwr yn cael ei lleihau, ac ati).

Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Sylwch nad yw carwsél nythu yn cael eu cynnal, ac yn gyffredinol nid yw carwsél yn cydymffurfio â safonau hygyrchedd.

Enghraifft

Nid yw carwsél yn normaleiddio dimensiynau sleidiau yn awtomatig. O'r herwydd, efallai y bydd angen i chi ddefnyddio cyfleustodau ychwanegol neu arddulliau arferol i faint cynnwys priodol. Er bod carwsél yn cefnogi rheolaethau a dangosyddion blaenorol/nesaf, nid oes eu hangen yn benodol. Ychwanegu ac addasu fel y gwelwch yn dda.

Mae .activeangen ychwanegu'r dosbarth at un o'r sleidiau neu ni fydd y carwsél yn weladwy. Hefyd gwnewch yn siŵr eich bod chi'n gosod unigryw idar y .carouselrheolyddion dewisol, yn enwedig os ydych chi'n defnyddio carwsél lluosog ar un dudalen. Rhaid i elfennau rheoli a dangosydd gael data-bs-targetpriodoledd (neu hrefar gyfer dolenni) sy'n cyfateb i nodwedd idyr .carouselelfen.

Sleidiau yn unig

Dyma garwsél gyda sleidiau yn unig. Sylwch ar bresenoldeb y delweddau carwsél .d-blockac .w-100arnynt i atal aliniad delwedd rhagosodedig y porwr.

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>

Gyda rheolyddion

Ychwanegu rheolaethau blaenorol a nesaf i mewn. Rydym yn argymell defnyddio <button>elfennau, ond gallwch hefyd ddefnyddio <a>elfennau gyda 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>

Gyda dangosyddion

Gallwch hefyd ychwanegu'r dangosyddion at y carwsél, ochr yn ochr â'r rheolyddion, hefyd.

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>

Gyda chapsiynau

Ychwanegwch gapsiynau i'ch sleidiau yn hawdd gyda'r .carousel-captionelfen o fewn unrhyw .carousel-item. Gellir eu cuddio'n hawdd ar fannau gwylio llai, fel y dangosir isod, gyda chyfleustodau arddangos dewisol . Rydyn ni'n eu cuddio i ddechrau gyda nhw .d-noneac yn dod â nhw yn ôl ar ddyfeisiau maint canolig gyda .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>

Croesfade

Ychwanegwch .carousel-fadeat eich carwsél i animeiddio sleidiau gyda thrawsnewidiad pylu yn lle sleid. Yn dibynnu ar eich cynnwys carwsél (ee, sleidiau testun yn unig), efallai y byddwch am ychwanegu .bg-bodyrhywfaint o CSS wedi'i deilwra at yr .carousel-items ar gyfer croes-baeddu priodol.

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>

Ychwanegu data-bs-interval=""at a .carousel-itemi newid faint o amser i oedi rhwng beicio'n awtomatig i'r eitem nesaf.

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>

Analluogi swiping cyffwrdd

Mae carwsél yn cefnogi troi i'r chwith / dde ar ddyfeisiau sgrin gyffwrdd i symud rhwng sleidiau. Gellir analluogi hyn gan ddefnyddio'r data-bs-touchbriodwedd. Nid yw'r enghraifft isod ychwaith yn cynnwys y data-bs-ridepriodoledd felly nid yw'n chwarae'n awtomatig.

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>

Amrywiad tywyll

Ychwanegu .carousel-darkat y .carouselrheolyddion, dangosyddion a chapsiynau tywyllach. Mae rheolyddion wedi'u gwrthdroi o'u llenwad gwyn diofyn gyda'r filtereiddo CSS. Mae gan gapsiynau a rheolaethau newidynnau Sass ychwanegol sy'n addasu'r colora 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>

Trawsnewid personol

Gellir newid hyd y trawsnewid .carousel-itemgyda'r $carousel-transition-durationnewidyn Sass cyn llunio neu arddulliau arferol os ydych chi'n defnyddio'r CSS a luniwyd. Os cymhwysir trawsnewidiadau lluosog, sicrhewch fod y trawsnewid trawsnewid yn cael ei ddiffinio yn gyntaf (ee transition: transform 2s ease, opacity .5s ease-out).

Sass

Newidynnau

Newidynnau ar gyfer pob carwsél:

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

Newidynnau ar gyfer y carwsél tywyll :

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

Defnydd

Trwy briodoleddau data

Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-bs-slideyn derbyn yr allweddeiriau prevneu next, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-bs-slide-toi basio mynegai sleidiau crai i'r carwsél data-bs-slide-to="2", sy'n symud lleoliad y sleidiau i fynegai penodol gan ddechrau gyda 0.

Defnyddir y data-bs-ride="carousel"briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. Os nad ydych chi'n defnyddio data-bs-ride="carousel"i gychwyn eich carwsél, mae'n rhaid i chi ei gychwyn eich hun. Ni ellir ei ddefnyddio ar y cyd â chychwyniad JavaScript penodol (diangen a diangen) o'r un carwsél.

Trwy JavaScript

Ffoniwch y carwsél â llaw gyda:

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

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Enw Math Diofyn Disgrifiad
interval rhif 5000 Faint o amser i oedi rhwng beicio eitem yn awtomatig.
keyboard boolaidd true A ddylai'r carwsél ymateb i ddigwyddiadau bysellfwrdd.
pause llinyn, boolean "hover" Os caiff ei osod "hover", mae'n oedi seiclo'r carwsél ymlaen mouseenterac yn ailddechrau seiclo'r carwsél ymlaen mouseleave. Os caiff ei osod i false, ni fydd hofran dros y carwsél yn ei oedi. Ar ddyfeisiadau cyffyrddiad, pan gaiff ei osod i "hover", bydd beicio'n oedi touchend(ar ôl i'r defnyddiwr orffen rhyngweithio â'r carwsél) am ddau gyfnod, cyn ailddechrau'n awtomatig. Mae hyn yn ychwanegol at ymddygiad y llygoden.
ride llinyn, boolean false Os yw wedi'i osod i true, mae'n chwarae'r carwsél yn awtomatig ar ôl i'r defnyddiwr feicio'r eitem gyntaf â llaw. Os yw wedi'i osod i "carousel", yn chwarae'r carwsél ar lwyth yn awtomatig.
touch boolaidd true A ddylai'r carwsél gefnogi rhyngweithiadau sweip chwith/dde ar ddyfeisiau sgrin gyffwrdd.
wrap boolaidd true A ddylai'r carwsél feicio'n barhaus neu gael stopiau caled.

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

Gallwch greu enghraifft carwsél gyda'r lluniwr carwsél, er enghraifft, i gychwyn gydag opsiynau ychwanegol a dechrau beicio trwy eitemau:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Dull Disgrifiad
cycle Beicio drwy'r eitemau carwsél o'r chwith i'r dde.
dispose Yn dinistrio carwsél elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM)
getInstance Dull statig sy'n eich galluogi i gael yr enghraifft carwsél yn gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Dull statig sy'n dychwelyd enghraifft carwsél sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn: bootstrap.Carousel.getOrCreateInstance(element).
next Beiciau i'r eitem nesaf. Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (ee, cyn i'r slid.bs.carouseldigwyddiad ddigwydd).
nextWhenVisible Peidiwch â beicio carwsél i nesaf pan nad yw'r dudalen yn weladwy neu pan nad yw'r carwsél neu ei riant yn weladwy. Yn dychwelyd i'r galwr cyn i'r eitem darged gael ei dangos .
pause Yn atal y carwsél rhag beicio trwy eitemau.
prev Cylchoedd i'r eitem flaenorol. Yn dychwelyd i'r galwr cyn i'r eitem flaenorol gael ei dangos (ee, cyn i'r slid.bs.carouseldigwyddiad ddigwydd).
to Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae). Yn dychwelyd i'r galwr cyn i'r eitem darged gael ei dangos (ee, cyn i'r slid.bs.carouseldigwyddiad ddigwydd).

Digwyddiadau

Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél. Mae gan y ddau ddigwyddiad yr eiddo ychwanegol a ganlyn:

  • direction: Y cyfeiriad y mae'r carwsél yn llithro iddo (naill ai "left"neu "right").
  • relatedTarget: Yr elfen DOM sy'n cael ei llithro i'w lle fel yr eitem weithredol.
  • from: Mynegai'r eitem gyfredol
  • to: Mynegai'r eitem nesaf

Mae pob digwyddiad carwsél yn cael ei danio at y carwsél ei hun (hy yn y <div class="carousel">).

Math o ddigwyddiad Disgrifiad
slid.bs.carousel Wedi'i danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau.
slide.bs.carousel Yn tanio ar unwaith pan fydd y slidedull enghraifft yn cael ei ddefnyddio. 
const myCarousel = document.getElementById('myCarousel')

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