in English

Carousel a wɔde yɛ nneɛma

Slideshow afã bi a wɔde sakre fa element ahorow mu—mfonini anaa nsɛm a wɔakyerɛw ho mfonini—te sɛ carousel.

Sɛnea ɛyɛ adwuma

Carousel no yɛ slideshow a wɔde sakre tu fa nsɛm a ɛtoatoa so mu, a wɔde CSS 3D nsakrae ne JavaScript kakra na esii. Ɛde mfonini ahorow, nsɛm, anaa agyiraehyɛde a wɔahyɛ da ayɛ na ɛyɛ adwuma. Ɛsan nso ka mmoa a wɔde ma wɔ kan/a edi hɔ a wɔde di dwuma ne nsɛnkyerɛnnede ahorow ho.

Wɔ browser ahorow a wɔboa Page Visibility API no mu no, carousel no bɛkwati sɛ ɛbɛtwetwe bere a wɛbsaet krataafa no ntumi nhu nea ɔde di dwuma no (te sɛ bere a browser tab no nyɛ adwuma, browser window no ayɛ ketewaa, ne nea ɛkeka ho).

Animation nkɛntɛnso a ɛwɔ saa ade yi mu no gyina prefers-reduced-motionmedia asɛmmisa no so. Hwɛ yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .

Yɛsrɛ wo hu sɛ wɔmfa nested carousels mmoa, na mpɛn pii no carousels nhyia gyinapɛn ahorow a ɛfa akwan a wɔfa so nya nneɛma ho.

Nea etwa to no, sɛ worekyekye yɛn JavaScript no afi fibea a, ɛhwehwɛ sɛutil.js .

Nhwɛsoɔ

Carousels ntumi nyɛ slide nsusuwii ahorow no sɛnea ɛte ankasa. Sɛnea ɛte no, ebia ɛho behia sɛ wode nneɛma foforo a wɔde di dwuma anaa akwan horow a wɔahyɛ da ayɛ di dwuma na ama woatumi ayɛ nneɛma no kɛse sɛnea ɛfata. Bere a carousels boa controls ne indicators a atwam/a edi hɔ no, ɛnyɛ nea wɔhwehwɛ pefee. Fa ka ho na yɛ nea wopɛ sɛnea wuhu sɛ ɛfata.

Ɛsɛ .activesɛ wɔde adesuakuw no ka slide ahorow no biako ho anyɛ saa a carousel no renhu. Afei nso hwɛ hu sɛ wode soronko bi idbesi hɔ .carouselama controls a wopɛ, titiriw sɛ wode carousels pii redi dwuma wɔ kratafa biako so a. Ɛsɛ sɛ control ne indicator elements no nya data-targetattribute (anaasɛ hrefma links) a ɛne idof the .carouselelement no hyia.

Slides nkutoo na ɛwɔ hɔ

Carousel a ɛwɔ slides nkutoo ni. Hyɛ .d-blockne .w-100wɔ carousel mfonini ahorow so no nsow na amma browser default mfonini ahorow no anhyehyɛ no.

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

Ne nneɛma a wɔde di dwuma

Fa ka ho wɔ controls a atwam ne nea edi hɔ no mu. Yɛhyɛ nyansa sɛ fa <button>elements di dwuma, nanso wubetumi nso de <a>elements a ɛwɔ 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>

Ne nsɛnkyerɛnnede ahorow

Wubetumi nso de nsɛnkyerɛnne no aka carousel no ho, aka controls no ho, nso.

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

Ne nsɛm a wɔakyerɛw wɔ so

Fa nsɛm a wɔakyerɛw no ka wo slide ahorow no ho mmerɛw denam .carousel-captionelement a ɛwɔ biara mu .carousel-itemno so . Wobetumi de asie ntɛm wɔ viewports nketewa so, sɛnea wɔakyerɛ wɔ ase ha no, a optional display utilities . Yɛde sie mfiase no .d-nonena yɛde san ba wɔ mfiri akɛse a ɛwɔ mfinimfini so de .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>

Crossfade a ɛyɛ fɛ

Fa ka .carousel-fadewo carousel ho na ama slide ahorow no ayɛ anigye denam fade nsakrae so sen sɛ wode slide bedi dwuma. Ɛgyina wo carousel mu nsɛm so (sɛ nhwɛso no, nsɛm nkutoo slides), ebia wobɛpɛ sɛ wode .bg-bodyanaa custom CSS bi ka .carousel-items no ho ma crossfading yiye.

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

Fa ka data-interval=""a ho .carousel-itemna sesa bere dodow a wode bɛkyɛ wɔ sakre a wobɛfa so ara akɔ ade a edi hɔ no ntam.

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

Ma touch swiping no nyɛ adwuma

Carousels boa swiping benkum/nifa wɔ touchscreen mfiri ahorow so ma ɛkɔ slide ahorow ntam. Wobetumi de data-touchattribute no asiw eyi ano. Nhwɛsoɔ a ɛwɔ aseɛ ha no nso nka data-rideattribute no ho na ɛwɔ data-interval="false"enti ɛnyɛ autoplay.

<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ɛnea wɔde di dwuma

Via data su ahorow so

Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-slidegye nsɛmfua titiriw prevanaa next, a ɛsakra slide gyinabea no toto ne mprempren gyinabea no ho. Sɛnea ɛbɛyɛ foforo no, fa di dwuma data-slide-tode fa raw slide index kɔ carousel no so data-slide-to="2", a ɛdannan slide no gyinabea kɔ index pɔtee bi a efi ase wɔ 0.

Wɔde data-ride="carousel"su no di dwuma de hyɛ carousel agyirae sɛ ɛyɛ animating a efi ase wɔ kratafa a wɔde hyɛ mu. Sɛ woamfa anhyɛ data-ride="carousel"wo carousel no ase a, ɛsɛ sɛ w’ankasa wohyɛ ase. Wontumi mfa nni dwuma nka (redundant ne nea ɛho nhia) pefee JavaScript mfiase a ɛwɔ carousel koro no ara ho.

Ɛdenam JavaScript so

Frɛ carousel denam nsa so de:

$('.carousel').carousel()

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-, sɛnea ɛwɔ data-interval="".

Din Korɔ Mfiaseɛ Nkyerɛmu
ntamgyinafo nɔma 5000 na ɛwɔ hɔ Bere dodow a ɛsɛ sɛ wɔtwentwɛn so wɔ ade bi a wɔde sakre tu kwan ankasa ntam. Sɛ false, carousel rentumi nkɔ kyinhyia ankasa.
keyboard so nsɛm boolean ho asɛm nokorɛ Sɛ ebia ɛsɛ sɛ carousel no yɛ n’ade wɔ nsɛm a esisi wɔ keyboard so no ho anaa.
home so ahama | boolean ho asɛm 'hover'.

Sɛ wode si 'hover', a, egyina carousel no sakre a ɛretu no so mouseenterna ɛsan fi ase de sakre a ɛretu wɔ carousel no so no mouseleave. Sɛ wode si false, a, sɛ wode wo ho to carousel no so a, ɛrennyae.

Wɔ mfiri a wɔde nsa ka so no so no, sɛ wode si 'hover', sakre so a, ɛbɛgyina touchend(bere a nea ɔde di dwuma no ne carousel no adi nkitaho wie no) ntam abien, ansa na wasan afi ase ankasa. Hyɛ no nsow sɛ eyi ka atifi hɔ mouse suban no ho.
twi ahoma ɛnyɛ ampa Autoplays carousel no bere a nea ɔde di dwuma no de ne nsa abɔ ade a edi kan no akyi. Sɛ wode si 'carousel', autoplays carousel no wɔ load so.
kyekyere ho boolean ho asɛm nokorɛ Sɛ́ ebia ɛsɛ sɛ carousel no di sakre bere nyinaa anaasɛ ɛwɔ gyinabea a ɛyɛ den.
sɔ mu boolean ho asɛm nokorɛ Sɛ ebia ɛsɛ sɛ carousel no boa benkum/nifa swipe nkitahodi wɔ touchscreen mfiri ahorow so anaa.

Akwan a wɔfa so yɛ

Asynchronous akwan ne nsakrae ahorow

API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛɛ no ​​no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Bio nso, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛresakra so no so .

Hwɛ yɛn JavaScript nkrataa no na woanya nsɛm pii .

.carousel(options)

Initializes carousel ne optional options objectna ofi ase sakre fa nneɛma mu.

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

.carousel('cycle')

Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa.

.carousel('pause')

Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu.

.carousel(number)

Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, te sɛ array). San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a wɔde asi wɔn ani so no (kyerɛ sɛ ansa na slid.bs.carouselasɛm no asi).

.carousel('prev')

Kyinkyin kɔ ade a atwam no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a atwam no (kyerɛ sɛ ansa na slid.bs.carouselasɛm no asi).

.carousel('next')

Kyinkyin kɔ ade a edi hɔ no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a edi hɔ no (kyerɛ sɛ ansa na slid.bs.carouselasɛm no asi).

.carousel('dispose')

Ɔsɛe element bi carousel.

.carousel('nextWhenVisible')

Mfa cycle no nkɔ carousel no so nkɔ next bere a kratafa no ntumi nhu anaasɛ carousel no anaa n’awofo no ntumi nhu no. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a edi hɔ no (kyerɛ sɛ ansa na slid.bs.carouselasɛm no asi).

.carousel('to')

Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, te sɛ array). San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a edi hɔ no (kyerɛ sɛ ansa na slid.bs.carouselasɛm no asi).

Nsɛm a esisi

Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi. Nsɛm abien no nyinaa wɔ nneɛma foforo a edidi so yi:

  • direction: Ɔkwan a carousel no retwe ( "left"anaasɛ "right").
  • relatedTarget: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.
  • from: Ade a ɛwɔ hɔ mprempren no ho index
  • to: Ade a edi hɔ no ho index

Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ, wɔ <div class="carousel">).

Nsɛm a Ɛsisii no Su Nkyerɛmu
slide.bs.carousel a wɔde hyɛ mu Saa adeyɛ yi tow ntɛm ara bere a slidewɔfrɛ instance kwan no.
slid.bs.afiri a wɔde hyɛ kar mu Wɔtow saa adeyɛ yi bere a carousel no awie ne slide nsakrae no. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Sesa nsakrae bere tenten

Nsakrae bere tenten a .carousel-itemwobetumi asesa ne $carousel-transitionSass variable ansa na woaboaboa ano anaasɛ custom styles sɛ wode CSS a wɔaboaboa ano no redi dwuma a. Sɛ wɔde nsakraeɛ dodoɔ bi di dwuma a, hwɛ sɛ wɔadi kan akyerɛkyerɛ nsakraeɛ nsakraeɛ no mu (sɛ nhwɛsoɔ no transition: transform 2s ease, opacity .5s ease-out).