Kaarooseelii
Qaama agarsiisa islaayidii elementoota keessa naanna'uuf-fakkiiwwan ykn islaayidoota barruu-akka kaarooseelii.
Akkaataa itti hojjetu
Karooseeliin 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.
prefers-reduced-motion
gaaffii 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 .active
islaayidoota keessaa tokkotti dabalamuu qaba yoo kana hin taane karooseeliin hin mul'atu. id
Akkasumas 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-target
amalli (ykn walqabsiisotaaf) kan qaama sanaa href
wajjin walsimu qabaachuu qabu .id
.carousel
Islaayidoota qofa
Kunoo carousel kan islaayidii qofa qabu. Hiriirsa fakkii durtii biraawzari ittisuuf argamaa .d-block
fi 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-caption
Qabeentaa 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-none
irratti 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-fade
Islaayidoota 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>
.carousel-item
Gidduu-galeessa dhuunfaa
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-touch
Kunis amaloota fayyadamuun hanqisuun ni danda'ama . Fakkeenyi armaan gadii akkasumas amallicha hin dabalatu data-bs-ride
akkasumas 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-dark
gara itti dabali . .carousel
Too'annoowwan guutinsa adii durtii isaanii irraa filter
qabeentaa CSS waliin garagalfamaniiru. Barreeffamoonni fi too'annoowwan jijjiiramoota Sass dabalataa kanneen color
fi 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-item
waliin jijjiiramuu danda'a . $carousel-transition-duration
Yoo 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-slide
jechoota furtuu prev
ykn next
, kan iddoo islaayidii bakka ammaa isaa wajjin walqabatee jijjiira. data-bs-slide-to
Akka 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:
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 Meeshaalee tuqaan dandeessisan irratti, yeroo gara tti saagamu |
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 .
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.carousel taatee hin uumamin dura). |
next |
Gara wanta itti aanutti marsaa. Wanti itti aanu osoo hin agarsiifamiin dura gara waamichaatti deebi'a (fkn, osoo slid.bs.carousel taatee 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.carousel taatee hin uumamin dura). |
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 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 ammaato
: Indeeksii wanta itti aanuu
Taateewwan karooseelii hundi karooseelicha mataa isaa irratti (jechuunis <div class="carousel">
) irratti dhukaafamu.
Gosa taatee | Ibsa |
---|---|
slide.bs.carousel |
slide Yeroo 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...
})