Source

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.

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 aanan yoo deeggaran, 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 kaarooseelii hedduu fayyadamaa jirta ta'e. Qaamonni too'annoo fi agarsiiftuu data-targetamalli (ykn hrefwalqabsiisotaaf) kan 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.

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

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

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 kaarooseelii irratti dhaaba mouseenterfi marsaa kaarooseelii irra deebi'ee jalqaba mouseleave. Yoo gara tti saagame false, kaarooseelii irratti hovering 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 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.

Gosa Taatee Ibsa
islaayidii.bs.kaarooseelii Taatee kun yeroo slidemala 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).