Tlolela go diteng tše kgolo Tlolela go docs navigation
Check
in English

Carousel ya go swara

Karolo ya pontšho ya diselaete ya go sepela ka paesekele ka gare ga dielemente—diswantšho goba dilaete tša sengwalwa—go swana le carousel.

Letlakaleng le

Kamoo e šomago ka gona

Carousel ke pontšho ya diselaete ya go sepela ka paesekele ka letoto la dikagare, yeo e agilwego ka diphetogo tša CSS 3D le go se nene ga JavaScript. E šoma ka lelokelelo la diswantšho, sengwalwa, goba go swaya ga tlwaelo. E akaretša gape le thekgo ya ditaolo tša peleng/tše di latelago le ditšhupetšo.

Ka go diphensele moo API ya go Ponagala ga Letlakala e thekgwago, carousel e tla efoga go thelela ge letlakala la wepe le sa bonagale go modiriši (go swana le ge thepo ya sephephediši e sa šome, lefasetere la sephephediši le fokoditšwe, bjalobjalo).

Phello ya dipopaye ya karolo ye e ithekgile ka prefers-reduced-motionpotšišo ya methopo ya ditaba. Bona karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .

Hle ela hloko gore di-carousel tše di tsentšwego ka gare ga sehlaga ga di thekgwe, gomme di-carousel ka kakaretšo ga di obamele maemo a phihlelelo.

Mohlala

Di-carousel ga di tlwaetše ka go iketla ditekanyo tša dia. Ka ge go le bjalo, o ka swanelwa ke go šomiša didirišwa tša tlaleletšo goba mekgwa ya tlwaelo go lekanyetša diteng ka tshwanelo. Le ge di-carousel di thekga ditaolo tša peleng/tše di latelago le ditšhupetšo, ga di nyakege ka go lebanya. Oketša le go tlwaetša ka moo o bonago go swanetše.

Tlelase .activee hloka go okeletšwa go ye nngwe ya dilaete go sego bjalo carousel e ka se bonagale. Gape kgonthišetša gore o beakanya e kgethegilego idgo ya .carouselbakeng sa ditaolo tša boikhethelo, kudu-kudu ge e ba o diriša di-carousel tše dintši letlakaleng le tee. Dielemente tša taolo le tša sešupo di swanetše go ba le data-bs-targetseka (goba hrefsa dikgokagano) seo se swanago le idsa .carouselelemente.

Dilaete fela

Mona ke carousel e nang le di-slide feela. Hlokomela go ba gona ga .d-blockle .w-100go diswantšho tša carousel go thibela go logaganya ga seswantšho sa go se fetoge sa sephephediši.

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>

Ka ditaolo

Go tlaleletša ka go ditaolo tša go feta le tše di latelago. Re kgothaletša go šomiša <button>dielemente, eupša o ka šomiša gape le <a>dielemente ka 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>

Ka ditshupo

O ka boela wa tlaleletša ka ditšhupetšo go carousel, go bapa le ditaolo, le tšona.

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>

Ka ditlhaloso tša ditlhalošo

Oketša ditlhalošo go dilaete tša gago gabonolo ka .carousel-captionelemente ka gare ga efe goba efe .carousel-item. Di ka utollwa gabonolo go di-viewport tše dinyenyane, bjalo ka ge go bontšhitšwe ka mo tlase, ka didirišwa tša pontšho tša boikhethelo . Re di uta mathomong ka .d-nonegomme re di bušetša morago go didirišwa tša bogolo bja magareng ka .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>

Crossfade ya go selaganya

Oketša .carousel-fadego carousel ya gago go phediša dilaete ka phetogo ya go fifala go e na le selaete. Go ya ka diteng tša gago tša carousel (mohlala, dilaete tša sengwalwa fela), o ka nyaka go oketša .bg-bodygoba CSS ye nngwe ya tlwaelo go .carousel-items bakeng sa go sefapano gabotse.

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>

Oketša data-bs-interval=""go a .carousel-itemgo fetoša nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela go ya go selo se se latelago.

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>

Thibela go swipa ka go kgoma

Di-carousel di thekga go swipa ka go le letshadi/go le letona go didirišwa tša skrine sa go kgoma go sepela magareng ga diselaete. Se se ka šitišwa ka go šomiša data-bs-touchseka. Mohlala wo o lego ka mo tlase gape ga o akaretše data-bs-rideseka ka fao ga o bapale ka go itiragalela.

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>

Lefifi fapaneng

Oketša .carousel-darkgo ya .carouselbakeng sa ditaolo tše lefsifsi, ditšhupetšo, le ditlhalošo. Ditaolo di fetotšwe go tšwa go tlatša ya tšona ya go se fetoge ye tšhweu ka filterthepa ya CSS. Ditlhalošo le ditaolo di na le diphetogo tša tlaleletšo tša Sass tšeo di tlwaetšago colorle 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>

Phetogo ya tlwaelo

Nako ya phetogo ya e .carousel-itemka fetolwa ka $carousel-transition-durationphetogo ya Sass pele ga go kgoboketša goba mekgwa ya tlwaelo ge e le gore o šomiša CSS ye e kgobokeditšwego. Ge e le gore diphetogo tše ntši di dirišwa, kgonthiša gore phetogo ya phetogo e hlalošitšwe pele (mohlala transition: transform 2s ease, opacity .5s ease-out).

Sass

Diphetogo

Diphetogo bakeng sa di-carousel ka moka:

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

Diphetogo bakeng sa carousel e lefifi : .

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

Tšhomišo

Ka dika ya data

Diriša dika tša data go laola gabonolo boemo bja carousel. data-bs-slidee amogela mantšu a bohlokwa prevgoba next, yeo e fetošago maemo a selaete ge e bapetšwa le maemo a yona a bjale. Ka go fapana le moo, šomiša data-bs-slide-togo fetiša tšhupamabaka ya selaete ye tala go carousel data-bs-slide-to="2", yeo e fetošago boemo bja selaete go tšhupamabaka ye e itšego yeo e thomago ka 0.

Sebopego data-bs-ride="carousel"se šomišwa go swaya carousel bjalo ka go phela go thoma ka go rwala letlakala. Ge o sa šomiše data-bs-ride="carousel"go thoma carousel ya gago, o swanetše go e thoma ka bowena. E ka se šomišwe ka kopanyo le (go sa nyakege le mo go sa nyakegego) go thoma ga JavaScript mo go lego molaleng ga carousel e swanago.

Ka JavaScript

Bitsa carousel ka letsoho le:

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

Dikgetho

Bjalo ka ge dikgetho di ka fetišwa ka dika tša datha goba JavaScript, o ka tlaleletša leina la kgetho go data-bs-, bjalo ka go data-bs-animation="{value}". Kgonthiša gore o fetoša mohuta wa molato wa leina la kgetho go tšwa go “ camelCase ” go ya go “ kebab-case ” ge o fetiša dikgetho ka dika tša datha. Ka mohlala, diriša data-bs-custom-class="beautifier"go e na le data-bs-customClass="beautifier".

Go tloga go Bootstrap 5.2.0, dikarolo ka moka di thekga seka sa datha ye e bolokilwego ya tekodata-bs-config yeo e ka beago peakanyo ya karolo ye bonolo bjalo ka thapo ya JSON. Ge elemente e na data-bs-config='{"delay":0, "title":123}'le le data-bs-title="456"dika, boleng bja mafelelo titlee tla ba 456gomme dika tša datha tše di aroganego di tla phaela ka thoko boleng bjo bo filwego go data-bs-config. Go tlaleletša, dika tša datha tše di lego gona di kgona go bea dikelo tša JSON go swana le data-bs-delay='{"show":0,"hide":150}'.

Leina Mohuta Hlokomologa Tlhalošo
interval nomoro 5000 Palo ya nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela selo.
keyboard boolean ya go swana true Gore na carousel e swanetše go arabela ditiragalong tša khiiboto.
pause thapo, boolean "hover" Ge e beakantšwe go "hover", e emiša go sepela ga carousel ka mouseenterpaesekele gomme e thoma gape go sepela ka paesekele ya carousel godimo mouseleave. Ge e ba o beakantšwe go false, go phaphamala godimo ga carousel go ka se e khutše. Go didirišwa tšeo di kgontšhitšwego go kgoma, ge di beakantšwe go "hover", go sepela ka dipaesekele go tla ema go šoma touchend(ge mosediriši a feditše go dirišana le carousel) ka dikgao tše pedi, pele go thoma gape ka go itiragalela. Se ke go tlaleletša go boitshwaro bja toeba.
ride thapo, boolean false Ge e beakantšwe go true, e bapala carousel ka go itiragalela ka morago ga ge modiriši a dikološe ka seatla selo sa mathomo. Ge e ba e beakantšwe go "carousel", e bapala ka go itiragalela carousel ka mošomo.
touch boolean ya go swana true Gore na carousel e swanetše go thekga ditirišano tša go swipa ka go le letshadi/go le letona go didirišwa tša touchscreen.
wrap boolean ya go swana true Gore na carousel e swanetše go sepela ka paesekele ka mo go tšwelago pele goba e be le mafelo a thata a go ema.

Mekgwa ya go šoma

Mekgwa ya asynchronous le diphetogo

Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .

Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .

O ka hlama mohlala wa carousel ka mohlami wa carousel, mohlala, go thoma ka dikgetho tša tlaleletšo gomme wa thoma go sepela ka paesekele ka dilo:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Mokgwa Tlhalošo
cycle Didikologa ka dilo tša carousel go tloga go le letshadi go ya go le letona.
dispose E senya carousel ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM)
getInstance Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa carousel wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Mokgwa wa go se fetoge wo o bušetšago mohlala wa carousel wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e se ya thongwa. O ka e diriša ka tsela ye: bootstrap.Carousel.getOrCreateInstance(element).
next Didikologo go ya go selo se se latelago. E boela go mogala pele ga ge selo se se latelago se bontšhitšwe (mohlala, pele ga ge slid.bs.carouseltiragalo e direga).
nextWhenVisible O se ke wa sepela ka paesekele ya carousel go ya go e latelago ge letlakala le sa bonagale goba carousel goba motswadi wa yona a sa bonagale. E boela go mogala pele ga ge selo seo se nepišitšwego se bontšhitšwe .
pause E thibela carousel go sepela ka dipaesekele ka dilo.
prev Didikologo go ya go selo sa go feta. E boela go mogala pele ga ge selo sa peleng se bontšhitšwe (mohlala, pele ga ge slid.bs.carouseltiragalo e direga).
to Cycles carousel ho foreime e itseng (0 e thehiloeng, e tšoanang le hlophisitsoeng). E boela go mogala pele ga ge selo seo se nepišitšwego se bontšhitšwe (mohlala, pele ga ge slid.bs.carouseltiragalo e direga).

Ditiragalo

Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša mošomong wa carousel. Ditiragalo tše ka bobedi di na le dithoto tše di latelago tša tlaleletšo:

  • direction: Tsela yeo carousel e thelelago ka yona (e ka ba "left"goba "right").
  • relatedTarget: Elemente ya DOM yeo e thelelago lefelong bjalo ka selo se se šomago.
  • from: Tšhupetšo ya selo sa bjale
  • to: Tšhupetšo ya selo se se latelago

Ditiragalo ka moka tša carousel di thuntšhwa go carousel ka boyona (ke gore go <div class="carousel">).

Mohuta wa tiragalo Tlhalošo
slid.bs.carousel E thuntšhwa ge carousel e phethile phetogo ya yona ya go thelela.
slide.bs.carousel E thunya ka pela ge slidemokgwa wa mohlala o bitšwa. 
const myCarousel = document.getElementById('myCarousel')

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