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

Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ agbalẽ si nye míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

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) si sɔ kple id si le.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 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>

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

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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.

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

Tsɔ kpe data-interval=""ɖe a .carousel-itemŋu be nàtrɔ ɣeyiɣi si nàhe ɖe megbe le gasɔdodo le eɖokui si yi nu si kplɔe ɖo gbɔ dome.

<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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" 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. Ne data-ride="carousel"mèzãe tsɔ dze wò carousel gɔme o la, ele be wò ŋutɔ nàdze egɔme. 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 kekefɔfɔ gɔme le mouseleave. Ne èɖoe ɖe false, la, ne ètsɔe ɖo carousel la dzi la, madzudzɔe 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 be wòatɔ sesĩe.
ka asi boolean ƒe ƒuƒoƒo nyateƒe Nenye be ele be carousel la nado alɔ miame/ɖusime swipe ƒe kadodowo le touchscreen-mɔ̃wo dzi.

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 yɔyɔ le akpa si le tɔtrɔm 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 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">).

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

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