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 xiqqaate fi kkf) karooseeliin akka hin lilmoo'u ni taasisa.

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 aanan yoo deeggaran, ifatti hin barbaachisan. Akka barbaaddanitti itti dabalaa fi dhuunfachiisi.

To'annoo filannoof irratti id addaa saaguu mirkaneessi .carousel, keessumaa yoo fuula tokko irratti kaarooseelota hedduu fayyadamaa jirta ta'e.

Islaayidoota qofa

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

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

To'annoo waliin

To'annoo duraa fi itti aanu keessatti dabaluu:

Kan duraa Kan itti aanu

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

Agarsiistota waliin

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

Kan duraa Kan itti aanu

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

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.

Kan duraa Kan itti aanu

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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 iddoo 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. 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="".

Malawwan

.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 ta'ee bakkatti siqsaa jiru.
• from: Indeeksii wanta ammaa
• to: Indeeksii wanta itti aanuu

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

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