Ekyuma ekiyitibwa Carousel

Ekitundu kya slideshow eky’okutambula mu elementi —ebifaananyi oba slides z’ebiwandiiko —nga carousel.

Engeri gye kikola

Carousel ye slideshow ey’okuvuga obugaali okuyita mu lunyiriri lw’ebirimu, ezimbiddwa n’enkyukakyuka za CSS 3D n’akatono aka JavaScript. Kikola n’ebifaananyi ebiddiriŋŋana, ebiwandiiko, oba obubonero obw’enjawulo. Era erimu okuwagira okufuga okw’emabega/okuddako n’ebiraga.

Mu browsers nga Page Visibility API ewagirwa, carousel ejja kwewala okusereba nga webpage telabika eri omukozesa (nga nga browser tab tekola, browser window ekendeezeddwa, n’ebirala).

Nsaba omanye nti nested carousels teziwagirwa, era carousels okutwalira awamu tezituukana na mutindo gwa kutuuka.

Ekisembayo, bw'oba ozimba JavaScript yaffe okuva ku nsibuko, kyetaagisautil.js .

Eky'okulabirako

Carousels tezizza bipimo bya slide mu ngeri ya bulijjo mu ngeri ey’otoma. Nga bwe kiri, oyinza okwetaaga okukozesa ebikozesebwa ebirala oba emisono egy’enjawulo okusobola okugerageranya obulungi ebirimu. Wadde nga carousels ziwagira ebifuga eby'emabega/ebiddako n'ebiraga, tebyetaagisa mu bulambulukufu. Okwongerako era okole nga bw’olaba.

Ekibiina .activekyetaaga okugattibwa ku emu ku slayidi bwe kitaba ekyo carousel tejja kulabika. Era kakasa nti oteeka id ey'enjawulo ku .carouselfor optional controls, naddala nga okozesa carousels eziwera ku lupapula lumu. Ebintu ebifuga n’ebiraga birina okuba n’ekintu data-target(oba hrefeky’enkolagana) ekikwatagana ne id .carousely’ekintu.

Slayidi zokka

Wano waliwo carousel eriko slides zokka. Weetegereze okubeerawo kwa .d-blockne .w-100ku bifaananyi bya carousel okuziyiza okulaganya ebifaananyi kwa browser okusookerwako.

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

Nga balina ebifuga

Okwongerako mu bifuga eby’emabega n’ebiddako:

Jjuuzi Ekiddako

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

Nga balina ebiraga

Osobola n’okugattako ebiraga ku carousel, ku mabbali g’ebifuga, nabyo.

Jjuuzi Ekiddako

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

Nga mulimu ebigambo ebiwandiikiddwako

Okwongera ebigambo ku slide zo mu ngeri ennyangu nga .carousel-captionelementi eri munda mu .carousel-item. Ziyinza okwanguyirwa okukwekebwa ku bifo ebitono eby’okulaba, nga bwe kiragibwa wansi, n’ebikozesebwa eby’okwolesebwa eby’okwesalirawo . Tuzikweka mu kusooka .d-nonene tuzikomyawo ku byuma ebya sayizi eya wakati nga tulina .d-md-block.

Ekiwandiiko kya slayidi ekisooka

Nulla vitae elit libero, eddagala eriyitibwa pharetra augue mollis erya wakati.

Layibu ya slayidi eyokubiri

Lorem ipsum dolor okutuula amet, okusengejja amasavu elit.

Layibu ya slayidi ey’okusatu

Ensigo eyitibwa commodo cursus magna, ekika kya vel scelerisque nisl ekizimbulukusa.

Jjuuzi Ekiddako

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

Okusalasalako

Okwongera .carousel-fadeku carousel yo okuzza obulamu mu slayidi nga olina enkyukakyuka ya fade mu kifo kya slide.

Jjuuzi Ekiddako

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

Enkozesa

Okuyita mu bikwata ku data

Kozesa data attributes okwanguyirwa okufuga ekifo kya carousel. data-slideekkiriza ebigambo ebikulu prevoba next, ekikyusa ekifo kya slayidi okusinziira ku kifo kyayo ekiriwo kati. Ekirala, kozesa data-slide-tookuyisa omuwendo gwa slayidi embisi ku carousel data-slide-to="2", ekikyusa ekifo kya slayidi okudda ku muwendo ogw’enjawulo okutandika ne 0.

Attribute data-ride="carousel"ekozesebwa okussaako akabonero ku carousel nga animating okutandika ku page load. Tesobola kukozesebwa wamu ne (redundant and unnecessary) okutandika kwa JavaScript okw’olwatu okwa carousel y’emu.

Okuyita mu JavaScript

Kuba carousel mu ngalo nga okozesa:

$('.carousel').carousel()

Eby’okulondako

Ebyokulonda bisobola okuyisibwa nga biyita mu data attributes oba JavaScript. Ku bikwata ku data, ssaako erinnya ly'okulonda ku data-, nga mu data-interval="".

Enkola

.carousel(options)

Atandikawo carousel n’enkola ez’okwesalirawo objectn’atandika okuvuga obugaali ng’ayita mu bintu.

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

.carousel('cycle')

Ezingulula okuyita mu bintu bya carousel okuva ku kkono okudda ku ddyo.

.carousel('pause')

Ayimiriza carousel okuvuga obugaali okuyita mu bintu.

.carousel(number)

Ezingulula carousel ku fuleemu entongole (0 okusinziira, okufaananako n'ensengekera). Edda eri oyo ayita nga ekintu ekigendererwa tekinnalagibwa (kwe kugamba nga slid.bs.carouselekintu tekinnabaawo).

.carousel('prev')

Enzirukanya okutuuka ku kintu ekyayita. Edda eri oyo ayita nga ekintu ekyasooka tekinnalagibwa (kwe kugamba nga slid.bs.carouselekintu tekinnabaawo).

.carousel('next')

Ezingulula okutuuka ku kintu ekiddako. Edda eri oyo akubira nga ekintu ekiddako tekinnalagibwa (kwe kugamba nga slid.bs.carouselekintu tekinnabaawo).

.carousel('dispose')

Asaanyaawo carousel ya elementi.

Ebibaddewo

Bootstrap's carousel class eraga ebibaddewo bibiri eby'oku hooking mu carousel functionality. Ebintu byombi birina eby’obugagga bino wammanga eby’okwongerako:

• direction: Obulagirizi carousel mw’eseeyeeya (oba "left"oba "right").
• relatedTarget: Ekintu kya DOM ekiseerezebwa mu kifo nga ekintu ekikola.
• from: Omuwendo gw'ekintu ekiriwo kati
• to: Omuko gw'ekintu ekiddako

Ebintu byonna ebibaawo mu carousel bikubwa ku carousel yennyini (kwe kugamba ku <div class="carousel">).

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

Kyuusa ebbanga ly’enkyukakyuka

Ebbanga ly'enkyukakyuka lya .carousel-itemliyinza okukyusibwa n'enkyukakyuka ya $carousel-transitionSass nga tonnaba kukungaanya oba emisono egy'ennono singa oba okozesa CSS ekunganyiziddwa. Singa enkyukakyuka eziwera zikozesebwa, kakasa nti enkyukakyuka y’enkyukakyuka esooka kunnyonnyolwa (okugeza transition: transform 2s ease, opacity .5s ease-out).