U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Carousel

Qayb ka mid ah bandhigyada slideshow ee baaskiilka lagu dhex wado canaasirta-sawirrada ama sawirada qoraalka-sida carousel-ka.

Boggan

Sida ay u shaqeyso

Carouselku waa sawir-qaade loogu talagalay baaskiil wadista iyada oo loo marayo taxane taxane ah, oo lagu dhisay isbeddellada CSS 3D iyo xoogaa JavaScript ah. Waxay la shaqaysaa sawirro taxane ah, qoraal, ama calaamadayn gaar ah. Waxa kale oo ka mid ah taageerada kontaroolada hore/xiga iyo tilmaamayaasha.

Barowsarrada halka laga taageero Page Visibility API , carouselku wuxuu iska ilaalin doonaa simbiriirixinta marka bogga mareegaha uusan u muuqan isticmaaluhu (sida marka tabka browserku aanu shaqayn, daaqada browserka waa la yareeyey, iwm.).

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Fadlan la soco in carousels buul leh aan la taageerin, iyo carousels guud ahaan ma waafaqsana heerarka gelitaanka.

Tusaale

Carousels si toos ah uma caadiyeeyaan cabbirrada slide. Sidan oo kale, waxaa laga yaabaa inaad u baahato inaad isticmaasho yutiilitida dheeraadka ah ama qaababka gaarka ah si aad u cabbirto nuxurka saxda ah. Halka carousels ay taageerto kontaroolada hore/xiga iyo tilmaamayaasha, si cad looguma baahna. Ku dar oo habbee sida aad ku habboon tahay.

Fasalka .activewuxuu u baahan yahay in lagu daro mid ka mid ah boggaga haddii kale carouselku ma muuqan doono. Sidoo kale hubi inaad dejiso mid u gaar idah .carouselkontaroolada ikhtiyaariga ah, gaar ahaan haddii aad isticmaalayso carousels badan hal bog. Cunsurada xakamaynta iyo tilmaamuhu waa inay lahaadaan data-bs-targetsifo (ama hrefxidhiidhinta) oo u iddhiganta .carouselcuriyaha.

Islaaydh kaliya

Halkan waxaa ah carousel oo leh sawirro kaliya. Ogsoonow joogitaanka .d-blockiyo .w-100sawirada carouselka si aad uga hortagto toosinta sawirka browserka.

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>

Xakamaynta

Ku darida kontaroolada hore iyo kan xiga. Waxaan kugula talineynaa inaad isticmaasho <button>walxaha, laakiin waxaad sidoo kale isticmaali kartaa <a>walxaha leh 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>

Iyadoo tilmaamayaasha

Waxa kale oo aad ku dari kartaa tilmaamayaasha carouselka, oo ay weheliyaan kontaroolada, sidoo kale.

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>

Qoraalo wata

Ku dar qoraallada boggagaaga si fudud oo leh .carousel-captioncuriyaha ku jira mid kasta .carousel-item. Waxay si fudud loogu qarin karaa daawashada yaryar, sida hoos ku cad, oo leh qalab bandhig oo ikhtiyaari ah . Waanu ku qarinaa marka hore oo aanu .d-noneku soo celinaa aaladaha dhexdhexaadka ah ee leh .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>

Isgoysyada

Ku darso .carousel-fadecarouselkaaga si aad u nooleeyso sawiro leh isbedel libdhaya halkii aad ka saari lahayd. Iyada oo ku xidhan nuxurka carouselkaaga (tusaale, qoraalka kaliya ee bogga), waxa laga yaabaa inaad rabto inaad ku darto .bg-bodyama qaar ka mid ah CSS-ga caadada u ah .carousel-items si ay u noqoto mid sax ah.

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>

Ku dar data-bs-interval=""a .carousel-itemsi aad u bedesho qadarka wakhtiga dib u dhigista inta u dhaxaysa si toos ah baaskiil wadida ilaa shayga xiga.

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>

Dami tabashada taabashada

Carousels waxay taageertaa ku dhufashada bidix/midig ee aaladaha shaashadda taabashada si ay u dhex maraan sawirada. Tan waa la joojin karaa iyadoo la adeegsanayo data-bs-touchsifada. Tusaalaha hoose sidoo kale kuma jiraan data-bs-ridesifada si aanu si toos ah u ciyaarin.

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>

Kala duwanaansho madow

Ku dar .carousel-darkkontaroolada .carouselmadow, tilmaamayaasha, iyo qoraalada. Koontaroolada ayaa laga leexiyay cadadkoodii caadiga ahaa ee ay ku buuxiyeen filterhantida CSS. Qoraalada iyo kontaroolada waxay leeyihiin doorsoomayaal Sass dheeraad ah oo habeeya coloriyo 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>

Kala-guurka gaarka ah

Muddada kala-guurka .carousel-itemwaxa lagu beddeli karaa $carousel-transition-durationdoorsoomaha Sass ka hor inta aan la ururin ama qaababka caadiga ah haddii aad isticmaalayso CSS-ga la soo ururiyey. Haddii kala-guuro badan la dabaqo, hubi in beddelka beddelka la qeexay marka hore (tusaale transition: transform 2s ease, opacity .5s ease-out).

Sass

Kala duwanaansho

Kala duwanaanshaha dhammaan carousels:

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

Kala duwanaanshaha carousel mugdiga ah :

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

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Isticmaal sifada xogta si aad si fudud u xakamayso booska carouselka. data-bs-slideaqbala ereyada furaha prevama next, kaas oo beddela booska slide marka loo eego booska uu hadda joogo. Haddii kale, isticmaal data-bs-slide-tosi aad u gudbiso tusmaynta slide ceeriin ee carousel data-bs-slide-to="2", kaas oo u beddelaya booska slide tusme gaar ah oo ka bilaabmaya 0.

Sifada data-bs-ride="carousel"waxa loo isticmaalaa in lagu calaamadiyo carousel-ka sida firfircoon ee ka bilaabmaya culayska bogga. Haddii aadan isticmaalin data-bs-ride="carousel"inaad ku bilawdo carouselkaaga, waa inaad adigu bilawdaa. Looma isticmaali karo marka lagu daro (kaadiraan iyo aan loo baahnayn) bilawga JavaScript cad ee isla carouselka.

Iyadoo loo marayo JavaScript

Si gacanta ah ula wac carousel:

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca Nooca Asal ahaan Sharaxaada
interval tirada 5000 Qadarka wakhtiga dib u dhigista udhaxaysa si toos ah shay baaskiil wadida.
keyboard booliyan true Haddii carouselku uu ka falcelinayo dhacdooyinka kiiboodhka.
pause xadhig, boolean "hover" Haddii la dejiyo "hover", waxay hakisaa baaskiil wadida karouselka oo daaran mouseenterdib u bilaabaya baaskiilka carouselka mouseleave. Haddii la dejiyo false, dul heehaabista karoosalka ma joojin doonto. Aaladaha taabanaya, marka lagu "hover"rakibo , baaskiil wadidku wuu joogsan doonaa touchend(mar alla markii isticmaaluhu dhammeeyo la falgalka carouselka) laba waqti, ka hor inta uusan si toos ah u bilaabin. Tani waxay u dheer tahay dabeecadda jiirka.
ride xadhig, boolean false Haddii lagu truerakibo , wuxuu si otomaatig ah u ciyaari karaa carouselka ka dib marka isticmaaluhu uu gacanta ku wareego shayga ugu horreeya. Haddii lagu "carousel"rakibo , wuxuu si otomaatig ah u ciyaari karaa carousel-ka isagoo rarnaa.
touch booliyan true Haddii carouselku uu taageerayo is dhexgalka bidix/midig ee aaladaha shaashadda taabashada ah.
wrap booliyan true Haddii carouselku si joogto ah u wareego ama uu yeesho joogsi adag.

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

Waxaad ku abuuri kartaa tusaale carousel dhisaha carousel, tusaale ahaan, si aad u bilawdo doorashooyin dheeraad ah oo aad ku bilowdo baaskiil wadista alaabta:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Habka Sharaxaada
cycle Wareegtada dhex mara alaabta carouselka bidix ilaa midig.
dispose Waxay baabi'isaa carousel-ka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)
getInstance Habka istaatigga ah ee kuu ogolaanaya inaad hesho tusaalaha carousel ee la xidhiidha curiyaha DOM, waxaad u isticmaali kartaa sidan: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Qaabka taagan ee soo celiya tusaale carousel ee la xidhiidha curiyaha DOM ama abuura mid cusub haddii aan la bilaabin. Waxaad u isticmaali kartaa sidan bootstrap.Carousel.getOrCreateInstance(element):.
next Wareegto shayga xiga Ku soo noqda qofka soo wacay ka hor inta aan shayga xiga la muujin (tusaale, ka hor intaanay slid.bs.carouseldhacdada dhicin).
nextWhenVisible Ha u wadin baaskiilka ku xiga marka bogga aan la arki karin ama karooselka ama waalidkeed la arki waayo. Ku soo noqda soo wacaha ka hor inta aan la tusin shayga la beegsaday .
pause Karoosalka ka joojiya in uu baaskiil ku dhex maro alaabta.
prev Wareegto shayga hore Ku soo noqoshada soo wacaha ka hor inta aan shaygii hore la muujin (tusaale, ka hor intaanay slid.bs.carouseldhacdada dhicin).
to Wareega karooselka si uu u sameeyo jir gaar ah (0 ku salaysan, oo la mid ah array). Ku soo noqda qofka soo wacay ka hor inta aan la muujin shayga bartilmaameedka ah (tusaale, ka hor intaanay slid.bs.carouseldhacdada dhicin).

Dhacdooyinka

Fasalka carousel ee Bootstrap wuxuu daaha ka qaadaa laba dhacdo oo loogu talagalay in lagu xidho shaqeynta carousel. Labada dhacdoba waxay leeyihiin waxyaabo dheeraad ah oo soo socda:

  • direction: Jihada uu carouselku u sii jeedo (ama "left"ama "right").
  • relatedTarget: Cunsurka DOM ee meesha lagu sibiibi sida shayga firfircoon.
  • from: Tusmada shayga hadda jira
  • to: Tusmada shayga xiga

Dhammaan dhacdooyinka carousel-ka waxaa lagu ridaa carouselka laftiisa (ie at the <div class="carousel">).

Nooca dhacdada Sharaxaada
slid.bs.carousel La eryo marka carouselku dhammeeyo kala-guurka slide-ka.
slide.bs.carousel Dab isla markiiba marka slidehabka tusaale ahaan loo yeedho. 
const myCarousel = document.getElementById('myCarousel')

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