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

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 id soronko bi besi hɔ wɔ .carouselfor optional controls no so, 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 .carouselelement no id 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 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>

Ne nneɛma a wɔde di dwuma

Sɛ wode ka ho wɔ controls a atwam ne nea edi hɔ no mu:

Dada Deɛ ɛdi hɔ

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

Ne nsɛnkyerɛnnede ahorow

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

Dada Deɛ ɛdi hɔ

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

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.

Nea edi kan wɔ slide label no so

Nulla vitae elit libero, aduru bi a wɔfrɛ no pharetra a wɔde hyɛ nipadua mu.

Slide label a ɛto so abien

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ.

Slide label a ɛto so abiɛsa

Praesent commodo cursus magna, a ɛyɛ fɛ a ɛyɛ fɛ yiye.

Dada Deɛ ɛdi hɔ

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

Dada Deɛ ɛdi hɔ

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

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

Akwan a wɔfa so yɛ

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

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

$('#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).