Buuka ku bigambo ebikulu Buuka ku docs navigation
Check
in English

Ekyuma ekiyitibwa Carousel

Ekitundu kya slideshow eky’okutambula mu elementi —ebifaananyi oba slides z’ebiwandiiko —nga carousel.

Ku muko guno

Engeri gye kikola

Carousel ye slideshow ey’okuvuga obugaali okuyita mu lunyiriri lw’ebirimu, ezimbiddwa n’enkyukakyuka za CSS 3D n’akatono aka JavaScript. Kikola n’ebifaananyi ebiddiriŋŋana, ebiwandiiko, oba obubonero obw’enjawulo. Era erimu okuwagira okufuga okw’emabega/okuddako n’ebiraga.

Mu browsers nga Page Visibility API ewagirwa, carousel ejja kwewala okusereba nga webpage telabika eri omukozesa (nga nga browser tab tekola, browser window ekendeezeddwa, n’ebirala).

Ekikolwa kya animation eky'ekitundu kino kyesigamye ku prefers-reduced-motionkubuuza kw'emikutu. Laba ekitundu ky'ekiteeso ekikendeezeddwa mu biwandiiko byaffe eby'okutuuka ku bantu .

Nsaba omanye nti nested carousels teziwagirwa, era carousels okutwalira awamu tezituukana na mutindo gwa kutuuka.

Eky'okulabirako

Carousels tezizza bipimo bya slide mu ngeri ya bulijjo mu ngeri ey’otoma. Nga bwe kiri, oyinza okwetaaga okukozesa ebikozesebwa ebirala oba emisono egy’enjawulo okusobola okugerageranya obulungi ebirimu. Wadde nga carousels ziwagira ebifuga eby'emabega/ebiddako n'ebiraga, tebyetaagisa mu bulambulukufu. Okwongerako era okole nga bw’olaba.

Ekibiina .activekyetaaga okugattibwa ku emu ku slayidi bwe kitaba ekyo carousel tejja kulabika. Era kakasa nti oteekawo eky'enjawulo idku .carouselfor optional controls, naddala nga okozesa carousels eziwera ku lupapula lumu. Ebintu ebifuga n’ebiraga birina okuba n’ekintu data-bs-target(oba eky’enkolagana href) ekikwatagana n’eky’ekintu.id.carousel

Slayidi zokka

Wano waliwo carousel eriko slides zokka. Weetegereze okubeerawo kwa .d-blockne .w-100ku bifaananyi bya carousel okuziyiza okulaganya ebifaananyi kwa browser okusookerwako.

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>

Nga balina ebifuga

Okwongerako mu bifuga eby’emabega n’ebiddako. Tukuwa amagezi okukozesa <button>elementi, naye osobola n'okukozesa <a>elementi ezirina 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>

Nga balina ebiraga

Osobola n’okugattako ebiraga ku carousel, ku mabbali g’ebifuga, nabyo.

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>

Nga mulimu ebigambo ebiwandiikiddwako

Okwongera ebigambo ku slide zo mu ngeri ennyangu nga .carousel-captionelementi eri munda mu .carousel-item. Ziyinza okwanguyirwa okukwekebwa ku bifo ebitono eby’okulaba, nga bwe kiragibwa wansi, n’ebikozesebwa eby’okwolesebwa eby’okwesalirawo . Tuzikweka mu kusooka .d-nonene tuzikomyawo ku byuma ebya sayizi eya wakati nga tulina .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>

Okusalasalako

Okwongera .carousel-fadeku carousel yo okuzza obulamu mu slayidi nga olina enkyukakyuka ya fade mu kifo kya slide. Okusinziira ku carousel yo (okugeza, ebiwandiiko byokka slides), oyinza okwagala okwongera .bg-bodyoba ezimu custom CSS ku .carousel-items okusobola okusala obulungi crossfading.

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>

Okwongerako data-bs-interval=""ku a .carousel-itemokukyusa obudde bw’okulwawo wakati w’okuvuga obugaali mu ngeri ey’otoma okutuuka ku kintu ekiddako.

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>

Lemesa okukwata ku ssimu

Carousels ziwagira okukuba ku kkono/ddyo ku byuma ebikwatagana okutambula wakati wa slides. Kino kiyinza okulemesa nga okozesa data-bs-touchekintu. Ekyokulabirako wansi nakyo tekirimu data-bs-rideattribute kale teki autoplay.

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>

Enkyukakyuka mu kizikiza

Okwongerako .carousel-darkku .carouselku bifuga ebiddugavu, ebiraga, n'ebigambo ebiwandiikiddwako. Ebifuga bikyusiddwa okuva mu kujjuza kwabyo okw'enjeru okwa bulijjo n'ekintu kya filterCSS. Ebigambo ebiwandiikiddwa n'ebifuga birina enkyukakyuka za Sass endala ezitereeza colorne 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>

Enkyukakyuka ey’ennono

Ebbanga ly'enkyukakyuka lya .carousel-itemliyinza okukyusibwa n'enkyukakyuka ya $carousel-transition-durationSass nga tonnaba kukungaanya oba emisono egy'ennono singa oba okozesa CSS ekunganyiziddwa. Singa enkyukakyuka eziwera zikozesebwa, kakasa nti enkyukakyuka y’enkyukakyuka esooka kunnyonnyolwa (okugeza transition: transform 2s ease, opacity .5s ease-out).

Sass nga bwe kiri

Enkyukakyuka ezikyukakyuka

Enkyukakyuka za carousels zonna:

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

Enkyukakyuka za carousel enzirugavu :

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

Enkozesa

Okuyita mu bikwata ku data

Kozesa data attributes okwanguyirwa okufuga ekifo kya carousel. data-bs-slideekkiriza ebigambo ebikulu prevoba next, ekikyusa ekifo kya slayidi okusinziira ku kifo kyayo ekiriwo kati. Ekirala, kozesa data-bs-slide-tookuyisa omuwendo gwa slayidi embisi ku carousel data-bs-slide-to="2", ekikyusa ekifo kya slayidi okudda ku muwendo ogw’enjawulo okutandika ne 0.

Attribute data-bs-ride="carousel"ekozesebwa okussaako akabonero ku carousel nga animating okutandika ku page load. Bw’oba ​​tokozesa data-bs-ride="carousel"kutandikawo carousel yo, olina okugitandika ggwe kennyini. Tesobola kukozesebwa wamu ne (redundant and unnecessary) okutandika kwa JavaScript okw’olwatu okwa carousel y’emu.

Okuyita mu JavaScript

Kuba carousel mu ngalo nga okozesa:

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

Eby’okulondako

Nga eby'okulonda bwe bisobola okuyisibwa nga biyita mu bikwata ku data oba JavaScript, osobola okugattako erinnya ly'okulonda ku data-bs-, nga mu data-bs-animation="{value}". Kakasa nti okyusa ekika kya case eky’erinnya ly’okulonda okuva ku “ camelCase ” okudda ku “ kebab-case ” ng’oyisa eby’okulonda ng’oyita mu data attributes. Okugeza, kozesa data-bs-custom-class="beautifier"mu kifo kya data-bs-customClass="beautifier".

Okuva ku Bootstrap 5.2.0, ebitundu byonna biwagira ekintu kya data ekiterekeddwa eky'okugezesadata-bs-config ekiyinza okuteeka ensengeka y'ebitundu ennyangu ng'olunyiriri lwa JSON. Ekintu bwe kiba data-bs-config='{"delay":0, "title":123}'n'ebintu data-bs-title="456", omuwendo ogusembayo titlegujja kuba 456era ebifaananyi bya data eby'enjawulo bijja kusazaamu emiwendo egyaweebwa ku data-bs-config. Okugatta ku ekyo, ebikwata ku data ebiriwo bisobola okuteeka emiwendo gya JSON nga data-bs-delay='{"show":0,"hide":150}'.

Erinnya Okuwandiika Okukosamu Okunnyonnyola
interval omuwendo 5000 Omuwendo gw’obudde okulwawo wakati w’okuvuga ekintu mu ngeri ey’otoma.
keyboard boolean true Oba carousel erina okuddamu ku bibaddewo ku keyboard.
pause olunyiriri, boolean "hover" Singa eteekebwa ku "hover", eyimiriza okuvuga obugaali bwa carousel ku mouseentern'okuddamu okuvuga obugaali bwa carousel ku mouseleave. Singa oteekebwa ku false, okuwuubaala ku carousel tekijja kugiyimiriza. Ku byuma ebisobola okukwata, bwe biteekebwa ku "hover", okuvuga obugaali kujja kuyimirira touchend(nga omukozesa amaze okukolagana ne carousel) okumala ebbanga bbiri, nga tannaddamu mu ngeri ya otomatiki. Kino kigatta ku nneeyisa y’ebibe.
ride olunyiriri, boolean false Singa kiteekebwa ku true, autoplays the carousel oluvannyuma lw'omukozesa okuzingulula ekintu ekisooka mu ngalo. Singa kiteekebwa ku "carousel", autoplays carousel ku load.
touch boolean true Oba carousel erina okuwagira enkolagana y’okukuba ku kkono/ku ddyo ku byuma ebikwata ku ssirini.
wrap boolean true Oba carousel erina okutambula obutasalako oba okuba n’ebifo ebikaluba.

Enkola

Enkola ezitakwatagana n’enkyukakyuka

Enkola zonna eza API tezikwatagana era zitandika enkyukakyuka . Zidda eri oyo akubye amangu ddala ng'enkyukakyuka etandise naye nga tennaggwaako . Okugatta ku ekyo, okuyita enkola ku kitundu ekikyukakyuka kujja kubuusibwa amaaso .

Laba ebiwandiiko byaffe ebya JavaScript okumanya ebisingawo .

Osobola okukola ekifaananyi kya carousel n’omuzimbi wa carousel, okugeza, okutandika n’eby’okulonda ebirala n’otandika okuvuga obugaali okuyita mu bintu:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Engeri Okunnyonnyola
cycle Ezingulula okuyita mu bintu bya carousel okuva ku kkono okudda ku ddyo.
dispose Asaanyaawo carousel ya elementi. (Eggyawo data eterekeddwa ku elementi ya DOM)
getInstance Enkola ya static ekusobozesa okufuna carousel instance ekwatagana ne DOM element, osobola okugikozesa nga eno: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Enkola ya static ezzaayo ekifaananyi kya carousel ekikwatagana ne elementi ya DOM oba okukola ekipya singa kiba nga tekitandikibwawo. Osobola okugikozesa bw’otyo: bootstrap.Carousel.getOrCreateInstance(element).
next Ezingulula okutuuka ku kintu ekiddako. Edda eri oyo ayita nga ekintu ekiddako tekinnalagibwa (okugeza, nga slid.bs.carouselekintu tekinnabaawo).
nextWhenVisible Tovuga carousel ku next nga page telabika oba carousel oba muzadde waayo nga talabika. Edda eri oyo akubira essimu nga ekintu ekigendererwa tekinnalagibwa .
pause Ayimiriza carousel okuvuga obugaali okuyita mu bintu.
prev Enzirukanya okutuuka ku kintu ekyayita. Edda eri oyo ayita nga ekintu ekyasooka tekinnalagibwa (okugeza, nga slid.bs.carouselekintu tekinnabaawo).
to Ezingulula carousel ku fuleemu entongole (0 okusinziira, okufaananako n'ensengekera). Edda eri oyo ayita nga ekintu ekigendererwa tekinnalagibwa (okugeza, nga slid.bs.carouselekintu tekinnabaawo).

Ebibaddewo

Bootstrap's carousel class eraga ebibaddewo bibiri eby'oku hooking mu carousel functionality. Ebintu byombi birina eby’obugagga bino wammanga eby’okwongerako:

  • direction: Obulagirizi carousel mw’eseeyeeya (oba "left"oba "right").
  • relatedTarget: Ekintu kya DOM ekiseerezebwa mu kifo nga ekintu ekikola.
  • from: Omuwendo gw'ekintu ekiriwo kati
  • to: Omuko gw'ekintu ekiddako

Ebintu byonna ebibaawo mu carousel bikubwa ku carousel yennyini (kwe kugamba ku <div class="carousel">).

Ekika ky’ekintu ekibaawo Okunnyonnyola
slid.bs.carousel Ekubwa nga carousel emalirizza enkyukakyuka yaayo eya slide.
slide.bs.carousel Ekuba amangu ddala nga slideenkola ya instance eyitiddwa. 
const myCarousel = document.getElementById('myCarousel')

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