Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
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 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.

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. 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 hrefwalqabsiisotaaf) kan kan qaamaa wajjin walsimu qabaachuu idqabu .carousel.

Islaayidoota qofa

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

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

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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 . Qabiyyee kaarooseelii kee irratti hundaa'uun (fkn, islaayidoota barruu qofa), qaxxaamuraa sirrii ta'eef .bg-bodyCSS amala tokko tokko s irratti dabaluu barbaadda ta'a ..carousel-item

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

html 
<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 hammatu data-bs-ridekanaaf ofumaan hin taphatu.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

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

Jijjiiramoota kaarooseelota hundaaf:

$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`)

Jijjiiramoota karooseelii dukkanaa'aa : .

$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 iddoo 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:

const carousel = new bootstrap.Carousel('#myCarousel')

Filannoowwan

Filannoon karaa amaloota deetaa ykn JaavaScript darbuu waan danda'uuf, maqaa filannoo gara data-bs-, akka keessatti dabaluu dandeessa data-bs-animation="{value}". Yeroo filannoowwan karaa amaloota deetaa dabarsitu akaakuu keesii maqaa filannoo “ camelCase ” irraa gara “ kebab-case ” jijjiiruu kee mirkaneessi. Fakkeenyaaf, data-bs-custom-class="beautifier"bakka data-bs-customClass="beautifier".

Bootstrap 5.2.0 irraa eegalee, qaamolee hundi amaloota deetaa yaaliidata-bs-config eegame kan qindeessaa qaama salphaa akka tarree JSON qabachuu danda'u deeggaru. Yeroo qaamni tokko amaloota data-bs-config='{"delay":0, "title":123}'fi qabu data-bs-title="456", gatii dhumaa titleta'a 456fi amaloonni deetaa adda addaa gatiiwwan irratti kennaman irra darbu data-bs-config. Dabalataan, amaloonni deetaa jiran gatiiwwan JSON akka data-bs-delay='{"show":0,"hide":150}'.

Maqaa Akaakuu Durtii dha Ibsa
interval lakkoofsa 5000 Hamma yeroo meeshaa tokko ofumaan marsaa gidduutti harkifachuu qabu.
keyboard boolee true Karooseeliin taateewwan kiiboordii irratti deebii kennuu qabaachuu fi dhiisuu isaa.
pause tarree, boolii "hover" 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. Kunis amala hantuutee irratti dabalata.
ride tarree, boolii false Yoo gara tti qindaa'e true, fayyadamaan wanta jalqabaa harkaan erga naanna'ee booda kaarooseelii ofumaan taphachiisa. Yoo gara tti qindaa'e "carousel", karooseelii fe'amuu irratti ofumaan taphachiisa.
touch boolee true Kaarooseeliin meeshaalee iskiriinii tuqaalee irratti walqunnamtii bitaa/mirgaa swipe deeggaru qabaachuu fi dhiisuu isaa.
wrap boolee true Kaarooseelichi marsaa itti fufiinsaan deemuu qaba moo dhaabbannaa cimaa qabaachuu qaba.

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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Mala Ibsa
cycle Meeshaalee karooseelii keessaa bitaa gara mirgaatti marsaa.
dispose Karooseelii elementii tokkoo ni balleessa. (Deetaa qaama DOM irratti kuufame ni haqa)
getInstance Mala static kan fakkeenya carousel elementii DOM waliin 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 dandeessa: bootstrap.Carousel.getOrCreateInstance(element).
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 galma hin agarsiifamin dura gara waamichaatti deebi'a .
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).
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).

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

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})