Source

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 keke to emenyawo kplɔ wo nɔewo ɖo, wotu kple CSS 3D tɔtrɔwo kple JavaScript vi aɖe. Ewɔa dɔ kple nɔnɔmetata siwo kplɔ wo nɔewo ɖo, nuŋɔŋlɔwo, alo dzesidenu siwo wowɔ ɖe ɖoɖo nu. Elɔ kpekpeɖeŋu na 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ɔ.

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.

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ɔ .img-fluidbe 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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:

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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ã.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>
Gbãtɔ ƒe akpa si le dɔ wɔm hiã

Ele .activebe woatsɔ klass la akpe ɖe slideawo dometɔ ɖeka ŋu. Ne menye nenema o la, carousel la madze o.

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.

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

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
dometsotso xexlẽdzesi 5000 ƒe xexlẽme Ɣeyiɣi agbɔsɔsɔme si woatsɔ ahe ɖe megbe le nu aɖe ƒe gasɔdodo le eɖokui si dome. Ne alakpae la, carousel mazɔ le eɖokui si o.
keyboard dzi boolean ƒe ƒuƒoƒo nyateƒe Nenye be ele be carousel la nawɔ nu ɖe ​​keyboard ƒe nudzɔdzɔwo ŋu.
tɔ vie kaƒoƒo | boolean ƒe ƒuƒoƒo "hover" .

Ne woɖoe ɖe "hover", tɔ te ʋufɔti la ƒe gasɔdodo ɖe edzi mouseentereye wògadze ʋufɔti la ƒe gasɔdodo gɔme le mouseleave. Ne èɖoe ɖe false, la, ne ètsɔe ɖo carousel la dzi la, matɔ vie o.

Le mɔ̃ siwo ŋu woate ŋu aka asi nu ɖo dzi la, ne woɖoe ɖe "hover", gasɔdodoa atɔ vie touchend(ne ezãla nya wɔ nu kple carousel la vɔ ko) hena dometsotso eve, hafi wòagadze egɔme le eɖokui si. De dzesii be esia kpe ɖe mouse ƒe nuwɔna si le etame ŋu.

ku ka alakpa Eƒoa carousel la le eɖokui si ne ezãla tsɔ asi ƒo nu gbãtɔa vɔ. Ne "carousel", autoplays carousel la le agba dzi.
bla boolean ƒe ƒuƒoƒo nyateƒe Nenye be ele be carousel la nanɔ gasɔ tsam atraɖii alo wòatɔ sesĩe.

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe si le akpa aɖe si le tɔtrɔm dzi dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo.

.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 ƒe klass la ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel ƒe 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 nusi le dɔ wɔm ene.
  • from: Nu si 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">).

Nudzɔdzɔ Ƒomevi Nuɖᴐɖᴐ
slide.bs.ʋuʋudedi ƒe ʋuʋudedi Nudzɔdzɔ sia dzona enumake ne woyɔ slidekpɔɖeŋu mɔnu la.
slid.bs.ʋuʋudedi ƒe ʋuʋudedi Wodaa tu nudzɔdzɔ sia ne carousel la wu eƒe slide ƒe tɔtrɔ nu.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})