Kaarooseelii

Qaama agarsiisa islaayidii elementoota keessa naanna'uuf-fakkiiwwan ykn islaayidoota barruu-akka kaarooseelii.

Akkaataa itti hojjetu

Kaarooseeliin agarsiisa islaayidii qabiyyee tartiiba keessa marsaa, jijjiirraa CSS 3D fi xiqqoo JaavaScriptiin ijaaramedha. Fakkiiwwan, barruu, ykn mallattoo amala walduraa duubaan hojjetaman waliin hojjeta. Akkasumas deeggarsa to’annoo fi agarsiistota duraanii/itti aananiif of keessatti qabata.

Biraawuzaroota bakka APIn Mul'achuu Fuulaa deeggarame keessatti, yeroo fuul-barruun fayyadamaaf hin mul'anne (kan akka yeroo caancala biraawzari sochii hin qabne, foddaan biraawzari xiqqeessuu fi kkf) karooseeliin akka hin lilmoo'u ni taasisa.

Bu'aan sochii qaama kanaa prefers-reduced-motiongaaffii miidiyaa irratti hundaa'a. Kutaa sochii hir'ate sanada dhaqqabummaa keenyaa ilaali .

Maaloo beekaa, kaarooseloonni man'ee qaban akka hin deeggaramne, akkasumas kaarooseloonni akka waliigalaatti ulaagaalee dhaqqabummaa wajjin kan wal hin simne.

Dhumarratti, yoo JavaScriptutil.js keenya madda irraa ijaaraa jirta ta'e, .

Fakkeenya

Kaarooseelonni ofumaan safara islaayidii hin normalize godhan. Akka kanaan, qabiyyee sirritti safaruuf faayidaa dabalataa ykn akkaataa amala fayyadamuu si barbaachisuu danda'a. Carousels too'annoo fi agarsiistota duraanii/itti aanu kan deeggaran yoo ta'u, ifatti hin barbaachisan. Akka barbaaddanitti itti dabalaa fi dhuunfachiisi.

Kutaan .activeislaayidoota keessaa tokkotti dabalamuu qaba yoo kana hin taane karooseeliin hin mul'atu. Akkasumas id addaa too'annoo filannoof irratti saaguu mirkaneessi .carousel, keessumaa yoo fuula tokko irratti kaarooseelota hedduu fayyadamaa jirta ta'e. Qaamonni too'annoo fi agarsiiftuu data-targetamalli (ykn hrefwalqabsiisotaaf) id qaama waliin walsimu qabaachuu qabu .carousel.

Islaayidoota qofa

Kunoo carousel kan islaayidii qofa qabu. Hiriirsa fakkii durtii biraawzari ittisuuf argamaa .d-blockfi fakkiiwwan kaarooseelii irratti hubadhu..w-100

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

To'annoo waliin

To'annoo duraa fi itti aanu keessatti dabaluu:

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

Agarsiistota waliin

Akkasumas agarsiistota gara karooseeliitti dabaluu dandeessa, too'annoowwan cinatti, akkasumas.

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

Barreeffamoota mata duree waliin

.carousel-captionQabeentaa kamiyyuu keessa jiruun salphaatti islaayidoota kee irratti barruulee dabali .carousel-item. Isaan salphaatti buufatawwan ilaalchaa xixiqqoo irratti dhokfamuu danda'u, akkuma armaan gadiitti, faayidaa agarsiisa filannoo wajjin . Jalqaba .d-noneirratti dhokfnee meeshaalee giddu galeessaa irratti .d-md-block.

Asxaa islaayidii jalqabaa

Nulla vitae elit libero, kan jedhamtu kan namatti tolu.

Asxaa islaayidii lammaffaa

Lorem ipsum dolor taa'uu amet, consectetur adipiscing elit.

Asxaa islaayidii sadaffaa

Praesent commodo cursus magna, vel scelerisque nisl consectetur jedhamuun beekama.

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

Qaxxaamuraa

.carousel-fadeIslaayidoota islaayidii osoo hin taane ce'umsa fade waliin sochoosuuf karooseelii kee irratti dabali .

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

`.carousel-item`Gidduu-galeessa dhuunfaa

Yeroo ofumaan gara wanta itti aanutti marsaa gidduutti harkifannaa jijjiiruuf gara data-interval=""atti dabali ..carousel-item

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

Fayyadama

Karaa amaloota deetaa

Bakka kaarooseelii salphaatti to'achuuf amaloota deetaa fayyadami. data-slidejechoota furtuu prevykn next, kan iddoo islaayidii bakka ammaa isaa wajjin walqabatee jijjiira. data-slide-toAkka filannootti, indeeksii islaayidii raw gara karooseeliitti dabarsuudhaaf fayyadami data-slide-to="2", kunis bakka islaayidii gara indeeksii murtaa'aa dhaan jalqabutti jijjiira 0.

Amalli data-ride="carousel"karooseelii akka sochoosuutti fe'iinsa fuula irraa eegalee mallattoo itti gochuuf fayyadama. Yoo data-ride="carousel"carousel kee initialize gochuuf hin fayyadamne ofuma kee initialize gochuu qabda. Innis (barbaachisaa fi hin barbaachifne) ifatti JaavaScript jalqabbii karooseelii walfakkaataa wajjin walitti makuun fayyadamuu hin danda'u.

Karaa JaavaScript

Carousel harkaan bilbili:

$('.carousel').carousel()

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu danda'u. Amaloota deetaatiif, maqaa filannoo gara data-, akkuma keessatti dabali data-interval="".

Maqaa	Akaakuu	Durtii dha	Ibsa
gidduugaleessaa	lakkoofsa	5000 ta'a	Hamma yeroo meeshaa tokko ofumaan marsaa gidduutti harkifachuu qabu. Yoo soba ta'e, carousel ofumaan hin marsaa.
kiiboordii	boolee	dhugaa	Karooseeliin taateewwan kiiboordii irratti deebii kennuu qabaachuu fi dhiisuu isaa.
gidduutti dhaabuu	tarree \| boolee	"hover" jedhu.	Yoo gara tti saagame `"hover"`, marsaa kaarooseelichaa irratti dhaaba `mouseenter`fi marsaa kaarooseelichaa irra deebi'ee jalqaba `mouseleave`. Yoo gara tti saagame `false`, kaarooseelii irratti olkaasuun hin dhaabu. Meeshaalee tuqaan dandeessisan irratti, yeroo gara tti saagamu `"hover"`, marsaan ni dhaabata `touchend`(yeroo fayyadamaan kaarooseelii wajjin walqunnamuu xumuree booda) yeroo lamaaf, ofumaan deebi'ee osoo hin jalqabin dura. Kun amala hantuutee armaan olii irratti dabalataa akka ta'e hubadhu.
oofuu	hidhaa	soba	Fayyadamaan wanta jalqabaa harkaan erga naanna'ee booda karooseelii ofumaan taphachiisa. Yoo "carousel", carousel fe'umsa irratti ofumaan taphachiisa.
itti maruu	boolee	dhugaa	Kaarooseelichi marsaa itti fufiinsaan deemuu qaba moo dhaabbannaa cimaa qabaachuu qaba.
tuquu	boolee	dhugaa	Kaarooseeliin meeshaalee iskiriinii tuqaalee irratti walqunnamtii bitaa/mirgaa swipe deeggaru qabaachuu fi dhiisuu isaa.

Malawwan

Malawwanii fi ce’umsawwan wal hin simne

Malleen API hundi wal hin simnee fi ce'umsa jalqabu . Akkuma ce'umsi jalqabame garuu osoo hin xumuramin gara nama bilbileetti deebi'u . Dabalataan, waamichi malaa qaama ce'umsaa irratti ni tuffatama .

Odeeffannoo dabalataaf galmee JaavaScript keenya ilaali .

`.carousel(options)`

Filannoo filannoo ta'een kaarooseelii jalqabsiisee objectmeeshaalee keessaa biskileetii jalqaba.

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

`.carousel('cycle')`

Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.

`.carousel('pause')`

Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.

`.carousel(number)`

Kaarooseelii gara furtuu murtaa'etti marsaa (0 irratti hundaa'e, tarree wajjin wal fakkaata). Wanti galmee osoo hin agarsiifamiin dura gara waamichaatti deebi'a (jechuunis osoo slid.bs.carouseltaatee hin uumamin dura).

`.carousel('prev')`

Gara wanta duraatti marsaa. Wanti duraanii osoo hin agarsiifamiin dura (jechuunis slid.bs.carouseltaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

`.carousel('next')`

Gara wanta itti aanutti marsaa. Wanti itti aanu osoo hin agarsiifamiin dura (jechuunis slid.bs.carouseltaatee osoo hin uumamin dura) gara waamichaatti deebi'a.

`.carousel('dispose')`

Karooseelii elementii tokkoo ni balleessa.

Taateewwan

Bootstrap's carousel class taateewwan lama hooking gara dalagaa carousel saaxila. Taateewwan lamaan amaloota dabalataa armaan gadii qabu:

direction: Kallattii kaarooseelichi itti lilmoo’u (yookaan "left"ykn "right").
relatedTarget: Qaama DOM kan akka wanta socho'aa bakkatti siqsaa jiru.
from: Indeeksii wanta ammaa
to: Indeeksii wanta itti aanuu

Taateewwan karooseelii hundi karooseelicha mataa isaa irratti (jechuunis <div class="carousel">) irratti dhukaafamu.

Gosa Taatee	Ibsa
islaayidii.bs.kaarooseelii	Taatee kun yeroo `slide`mala fakkeenyaa waamamu battalumatti dhukaasa.
slid.bs.kaarooseelii	Taatee kun kan dhukaafamu yeroo kaarooseeliin ce'umsa islaayidii isaa xumurudha.

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

Yeroo ce'umsaa jijjiiri

Yeroon ce'umsaa kan jijjiiramaa Sass qindeessuu dura ykn akkaataa amala yoo CSS qindaa'e fayyadamaa jirta ta'e .carousel-itemwaliin jijjiiramuu danda'a . $carousel-transitionYoo ce'umsi dachaa hojiirra oole, ce'umsi jijjiirraa dursee akka ibsame mirkaneessi (fkn. transition: transform 2s ease, opacity .5s ease-out).