in English

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

Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ 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 tɔxɛ aɖe idɖ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 idakpaa .carouseltɔ.

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

Tsɔ kpe ɖe dziɖuɖu siwo do ŋgɔ kple esiwo kplɔe ɖo ŋu. Míele aɖaŋu ɖom be nàzã <button>elements, gake àteŋu azã <a>elements kple 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>

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

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>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 ƒ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. Le wò carousel me nyawo nu (le kpɔɖeŋu me, nuŋɔŋlɔ ɖeɖeko ƒe slidewo), àteŋu atsɔ .bg-bodyalo CSS tɔxɛ aɖewo akpe ɖe .carousel-items la ŋu hena crossfading nyuie.

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

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

Tsɔ asikaka asikaka ŋu ƒe ʋuʋu ŋu dɔ

Carousels doa alɔ asiɖeɖe le miame/ɖusime le touchscreen-mɔ̃wo dzi be nàʋuʋu le slidewo dome. Woateŋu atɔ te esia to data-touchnɔnɔmea zazã me. Kpɔɖeŋu si le ete hã metsɔ data-ridenɔnɔmea de eme o eye wòle data-interval="false"ale be mewɔa autoplay o.

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

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 false, 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 woɖoe ɖe 'carousel', eƒoa carousel la le eɖokui si le agba me.
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 ƒe yɔyɔ aɖe dzi 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.

.carousel('nextWhenVisible')

Mègatsɔ gasɔ na carousel la ayi next ne axaa mele dzedzem o alo carousel la alo edzila mele dzedzem o. 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('to')

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 woaɖe nusi kplɔe ɖo afia (si nye hafi slid.bs.carouselnudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type Description
slide.bs.carousel This event fires immediately when the slide instance method is invoked.
slid.bs.carousel This event is fired when the carousel has completed its slide transition. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Change transition duration

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