Source

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

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

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

Nga balina ebifuga

Okwongerako mu bifuga eby’emabega n’ebiddako:

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

Nga balina ebiraga

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

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

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.

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

Okusalasalako

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

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

Okwongerako data-interval=""ku a .carousel-itemokukyusa obudde bw’okulwawo wakati w’okuvuga obugaali mu ngeri ey’otoma okutuuka ku kintu ekiddako.

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

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. Bw’oba ​​tokozesa data-ride="carousel"kutandikawo carousel yo, olina okugitandika ggwe kennyini. 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="".

Erinnya Okuwandiika Okukosamu Okunnyonnyola
interval omuwendo 5000 Omuwendo gw’obudde okulwawo wakati w’okuvuga ekintu mu ngeri ey’otoma. Bwe kiba kya bulimba, carousel tejja kutambula butereevu.
ekitabo ekikwata ku kibboodi boolean kituufu Oba carousel erina okuddamu ku bibaddewo ku keyboard.
okuyimirizamu olunyiriri | boolean "okuwuubaala".

Singa eteekebwa ku "hover", eyimiriza okuvuga obugaali bwa carousel ku mouseentern'okuddamu okuvuga obugaali bwa carousel ku mouseleave. Singa oteekebwa ku false, okuwuubaala ku carousel tekijja kugiyimiriza.

Ku byuma ebisobola okukwata, bwe biteekebwa ku "hover", okuvuga obugaali kujja kuyimirira touchend(nga omukozesa amaze okukolagana ne carousel) okumala ebbanga bbiri, nga tannaddamu mu ngeri ya otomatiki. Weetegereze nti kino kigatta ku nneeyisa ya mouse waggulu.
okusotta akaguwa -kyaamu Autoplays the carousel oluvannyuma lw'omukozesa okuzingulula ekintu ekisooka mu ngalo. Singa "carousel", autoplays carousel ku load.
okuzinga boolean kituufu Oba carousel erina okutambula obutasalako oba okuba n’ebifo ebikaluba.
okukwaata boolean kituufu Oba carousel erina okuwagira enkolagana y’okukuba ku kkono/ku ddyo ku byuma ebikwata ku ssirini.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

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

Ekika ky’Ekibaddewo Okunnyonnyola
slide.bs.ekyuma ekiyitibwa carousel Ekintu kino kikuba amangu ddala nga slideenkola y'ekyokulabirako eyitibwa.
ekiseeyeeya.bs.carousel Ekintu kino kikubwa nga carousel emalirizza enkyukakyuka yaayo eya slide. 
$('#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).