Carousel ƒe ƒuƒoƒo

Slide-ɖeɖefia ƒe akpa aɖe si wotsɔa kekeli toa nu veviwo me—nɔnɔmetatawo alo nuŋɔŋlɔwo ƒe slidewo—abe carousel ene.

Ale si wòwɔa dɔe

Carousel la nye slideshow na kekeli to emenyawo kplɔ wo nɔewo ɖo me, wotu kple CSS 3D tɔtrɔwo kple JavaScript vi aɖe. Ewɔa dɔ kple nɔnɔmetata, nuŋɔŋlɔ, alo dzesidenu siwo wowɔ ɖe ɖoɖo nu. Elɔ kpekpeɖeŋu nana dziɖuɖu siwo va yi/siwo kplɔe ɖo kple dzesiwo hã ɖe eme.

Le web-browser siwo me wodoa alɔ Page Visibility API la, carousel la aƒo asa na ʋuʋu ne webpage la mele dzedzem na ezãla o (abe ne browser tab la mele dɔ wɔm o, browser ƒe fesrea dzi ɖe kpɔtɔ, kple bubuawo ene).

Taflatse nyae be womedoa alɔ nested carousels o, eye zi geɖe la, carousels mewɔna ɖe mɔɖeɖe ƒe dzidzenuwo dzi o.

Mlɔeba la, ne èle míaƒe JavaScript tum tso dzɔtsoƒe la, ebia beutil.js .

Kpɔɖeŋu

Carousels mewɔa slide ƒe didimewo wòsɔna ɖe ɖoɖo nu le wo ɖokui si o. Esi wòle alea ta la, ɖewohĩ ahiã be nàzã dɔwɔnu bubuwo alo atsyã siwo nèwɔ ɖe ɖoɖo nu atsɔ adzidze nyatakakawo ƒe lolome wòasɔ. Togbɔ be carousels doa alɔ dziɖuɖu kple dzesi siwo do ŋgɔ/si kplɔe ɖo hã la, womebia tso wo si tẽ o. Tsɔ kpe ɖe eŋu eye nàtrɔ asi le eŋu alesi nèkpɔe be esɔ.

Ele .activebe woatsɔ klass la akpe ɖe slideawo dometɔ ɖeka ŋu ne menye nenema o la, carousel la madze o. Azɔ hã kpɔ egbɔ be yeɖo id tɔxɛ aɖe ɖe .carouselna tiatiawɔblɔɖe ƒe dziɖuɖuwo dzi, vevietɔ ne èle carousel geɖe zãm le axa ɖeka dzi. Ele be data-targetnɔnɔme (alo hrefna kadodowo) nanɔ dziɖuɖu kple dzesi ƒe akpawo si si sɔ kple akpaa ƒe id .carousel.

Slides ɖeɖeko

Carousel si me slidewo koe le lae nye esi. .d-blockDe dzesii be kple le carousel nɔnɔmetatawo dzi ƒe anyinɔnɔ .w-100be nàxe mɔ ɖe browser ƒe nɔnɔmetatawo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu nu.

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

Kple nusiwo dzi woaɖu

Ne ètsɔe kpe ɖe dziɖuɖu siwo do ŋgɔ kple esiwo kplɔe ɖo ŋu la:

Si do ŋgᴐ Esi kplᴐe ɖo

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

Kple dzesiwo

Àte ŋu atsɔ dzesiawo hã akpe ɖe carousel la ŋu, kpe ɖe dziɖunuwo ŋu, hã.

Si do ŋgᴐ Esi kplᴐe ɖo

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

Kple nuŋɔŋlɔ siwo le ete

Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-captionelement si le ɖesiaɖe me .carousel-item. Woate ŋu aɣla wo bɔbɔe ɖe nukpɔkpɔ suewo dzi, abe alesi woɖee fia le ete ene, kple nukpɔkpɔ ƒe dɔwɔnu siwo woate ŋu atia . Míeɣlaa wo le gɔmedzedzea me kple .d-noneeye míegbugbɔa wo vaa mɔ̃ siwo lolo titina dzi kple .d-md-block.

Slide ƒe dzeside gbãtɔ

Nulla vitae elit libero, si nye lã si woyɔna be pharetra augue mollis si wotsɔ ƒoa ƒui.

Slide ƒe dzeside evelia

Lorem ipsum dolor bɔbɔ nɔ amet, consectetur adipiscing elit.

Slide ƒe dzeside etɔ̃lia

Praesent commodo cursus magna, si nye lãgbalẽgolo si wotsɔ ƒo ƒui.

Si do ŋgᴐ Esi kplᴐe ɖo

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

Crossfade ƒe ƒuƒoƒo

Tsɔe kpe .carousel-fadeɖe wò carousel ŋu be nàna slidewo nawɔ agbe kple fade transition ɖe slide teƒe.

Si do ŋgᴐ Esi kplᴐe ɖo

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

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-slidexɔa nya veviawo prevalo next, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-slide-tonàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-slide-to="2"la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0.

Wozãa data-ride="carousel"nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.

To JavaScript dzi

Yɔ carousel kple asi kple:

$('.carousel').carousel()

Tiatiawɔblɔɖewo

Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-, abe alesi wòle le data-interval="".

Mɔnuwo

.carousel(options)

Edzea carousel la gɔme kple tiatia siwo woate ŋu atia objecteye wòdzea gasɔdodo gɔme to nuawo me.

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

.carousel('cycle')

Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.

.carousel('pause')

Exea mɔ na carousel la be wòagazɔ to nuwo me o.

.carousel(number)

Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array). Trɔ yi ame si yɔe gbɔ hafi woɖe nusi woɖo taɖodzinu na la fia (si nye hafi slid.bs.carouselnudzɔdzɔa nadzɔ).

.carousel('prev')

Tsitre ɖe nusi do ŋgɔ ŋu. Trɔ yi amesi yɔe gbɔ hafi woɖe nusi do ŋgɔ la fia (si nye hafi slid.bs.carouselnudzɔdzɔa nadzɔ).

.carousel('next')

Tsitre ɖe nu si kplɔe ɖo ŋu. Trɔ yi ame si yɔe gbɔ hafi woaɖe nusi kplɔe ɖo afia (si nye hafi slid.bs.carouselnudzɔdzɔa nadzɔ).

.carousel('dispose')

Egblẽa nu le element aɖe ƒe carousel ŋu.

Nudzɔdzɔwo

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me. Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:

• direction: Mɔ si dzi carousel la le ʋuʋum ɖo ( "left"alo alo "right").
• relatedTarget: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nu si le dɔ wɔm ene.
• from: Nusi li fifia ƒe index
• to: Nu si kplɔe ɖo ƒe index

Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">).

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

Trɔ tɔtrɔ ƒe ɣeyiɣi didime

Woateŋu atrɔ tɔtrɔ ƒe ɣeyiɣi didime ƒe .carousel-itemkple $carousel-transitionSass ƒe tɔtrɔ hafi aƒo ƒu alo atsyã tɔxɛwo ne èle CSS si woƒo ƒu la zãm. Ne wozã tɔtrɔ geɖewo la, kpɔ egbɔ be woɖe tɔtrɔ ƒe tɔtrɔa gɔme gbã (le kpɔɖeŋu me transition: transform 2s ease, opacity .5s ease-out).