Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
in English

Kaarooseelii

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

Fuula kana irratti

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.

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. idAkkasumas too'annoo filannoof kan irratti addaa saaguu mirkaneessi .carousel, keessumaa yoo fuula tokko irratti kaarooseelii hedduu fayyadamaa jirta ta'e. Qaamonni too'annoo fi agarsiiftuu data-bs-targetamalli (ykn walqabsiisotaaf) kan qaama sanaa hrefwajjin walsimu qabaachuu qabu .id.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-bs-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. Qaamolee fayyadamuu ni gorsina , garuu elementoota waliin <button>fayyadamuu dandeessa .<a>role="button"

<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Agarsiistota waliin

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

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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 id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Tuttuqaa swiping hanqisi

Carousels meeshaalee touchscreen irratti bitaa/mirga swiping gochuun islaayidoota gidduutti socho'uu ni deeggaru. data-bs-touchKunis amaloota fayyadamuun hanqisuun ni danda'ama . Fakkeenyi armaan gadii akkasumas amallicha hin dabalatu data-bs-rideakkasumas qaba data-bs-interval="false"kanaaf ofumaan hin taphatu.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Garaagarummaa dukkanaa'aa

To'annoo, agarsiistota, fi barruulee dukkanaa'oo ta'aniif .carousel-darkgara itti dabali . .carouselToo'annoowwan guutinsa adii durtii isaanii irraa filterqabeentaa CSS waliin garagalfamaniiru. Barruulee fi too'annoowwan jijjiiramoota Sass dabalataa kanneen colorfi dhuunfachiisan qabu background-color.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Ce'umsa aadaa

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-transition-durationYoo ce'umsi dachaa hojiirra oole, ce'umsi jijjiirraa dursee akka ibsame mirkaneessi (fkn. transition: transform 2s ease, opacity .5s ease-out).

Sass jedhama

Jijjiiramoota

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Fayyadama

Karaa amaloota deetaa

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

Amalli data-bs-ride="carousel"karooseelii akka sochoosuutti fe'iinsa fuula irraa eegalee mallattoo itti gochuuf fayyadama. Yoo data-bs-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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Filannoowwan

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

Maqaa Akaakuu Durtii dha Ibsa
interval lakkoofsa 5000 Hamma yeroo meeshaa tokko ofumaan marsaa gidduutti harkifachuu qabu. Yoo false, carousel ofumaan hin marsaa.
keyboard boolee true Karooseeliin taateewwan kiiboordii irratti deebii kennuu qabaachuu fi dhiisuu isaa.
pause tarree | boolee 'hover'

Yoo gara tti saagame 'hover', marsaa kaarooseelichaa irratti dhaaba mouseenterfi 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.
ride tarree | boolee false Fayyadamaan wanta jalqabaa harkaan erga naanna'ee booda karooseelii ofumaan taphachiisa. Yoo gara tti qindaa'e 'carousel', karooseelii fe'amuu irratti ofumaan taphachiisa.
wrap boolee true Kaarooseelichi marsaa itti fufiinsaan deemuu qaba moo dhaabbannaa cimaa qabaachuu qaba.
touch boolee true 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 .

Ijaarsa kaarooseelii waliin fakkeenya kaarooseelii uumuu dandeessa, fakkeenyaaf, filannoowwan dabalataatiin jalqabuu fi wantoota keessa marsaa jalqabuuf:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Mala Ibsa
cycle Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.
pause Kaarooseeliin meeshaalee keessa akka hin biskileetii hin deemne ni dhaaba.
prev Gara wanta duraatti marsaa. Wanti duraa osoo hin agarsiifamiin dura gara waamichaatti deebi'a (fkn, osoo slid.bs.carouseltaatee hin uumamin dura).
next Gara wanta itti aanutti marsaa. Wanti itti aanu osoo hin agarsiifamiin dura gara waamichaatti deebi'a (fkn, osoo slid.bs.carouseltaatee hin uumamin dura).
nextWhenVisible Yeroo fuul-barruun hin mul'anne ykn carousel ykn warri isaa hin mul'anne carousel gara itti aanutti hin marsaa. Wanti galmee osoo hin agarsiifamiin dura gara waamichaatti deebi'a
to Kaarooseelii gara furtuu murtaa'etti marsaa (0 irratti hundaa'e, tarree wajjin wal fakkaata). Wanti galmee osoo hin agarsiifamiin dura gara waamichaatti deebi'a (fkn, osoo slid.bs.carouseltaatee hin uumamin dura).
dispose Karooseelii elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
getInstance Mala static kan fakkeenya carousel elementii DOM wajjin walqabate argachuuf si dandeessisu, akkasitti fayyadamuu dandeessa:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Mala istaatiksii kan fakkeenya kaarooseelii elementii DOM waliin walqabate deebisu ykn yoo hin jalqabne haaraa uumu. Akkasitti fayyadamuu dandeessu:bootstrap.Carousel.getOrCreateInstance(element)

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
slide.bs.carousel slideYeroo mala fakkeenyaa waamamu battalumatti dhukaasa.
slid.bs.carousel Yeroo carousel ce'umsa islaayidii isaa xumuru dhukaasa. 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})