Carwsél

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

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

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

Yn olaf, os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js .

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 id unigryw ar y .carouselrheolyddion dewisol, yn enwedig os ydych chi'n defnyddio carwsél lluosog ar un dudalen. Rhaid i elfennau rheoli a dangosydd gael data-targetpriodoledd (neu hrefar gyfer dolenni) sy'n cyfateb i id yr .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.

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Gyda rheolyddion

Gan ychwanegu'r rheolyddion blaenorol a'r rheolaethau nesaf:

Blaenorol Nesaf

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

Gyda dangosyddion

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

Blaenorol Nesaf

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

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.

Label sleidiau cyntaf

Nulla vitae elit libero, interdum pharetra augue mollis.

Ail label sleid

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Trydydd label sleid

Praesent comodo cursus magna, neu scelerisque nisl consectetur.

Blaenorol Nesaf

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Croesfade

Ychwanegwch .carousel-fadeat eich carwsél i animeiddio sleidiau gyda thrawsnewidiad pylu yn lle sleid.

Blaenorol Nesaf

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Defnydd

Trwy briodoleddau data

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

Defnyddir y data-ride="carousel"briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. 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:

$('.carousel').carousel()

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-, fel yn data-interval="".

Dulliau

.carousel(options)

Yn cychwyn y carwsél gydag opsiynau dewisol objectac yn dechrau beicio trwy eitemau.

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

.carousel('cycle')

Beicio drwy'r eitemau carwsél o'r chwith i'r dde.

.carousel('pause')

Yn atal y carwsél rhag beicio trwy eitemau.

.carousel(number)

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 (hy cyn i'r slid.bs.carouseldigwyddiad ddigwydd).

.carousel('prev')

Cylchoedd i'r eitem flaenorol. Yn dychwelyd i'r galwr cyn i'r eitem flaenorol gael ei dangos (hy cyn i'r slid.bs.carouseldigwyddiad ddigwydd).

.carousel('next')

Beiciau i'r eitem nesaf. Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (hy cyn i'r slid.bs.carouseldigwyddiad ddigwydd).

.carousel('dispose')

Yn dinistrio carwsél elfen.

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Newid hyd y trawsnewid

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