Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
in English

Xigwitsirisi

Xiphemu xa nkombiso wa swilayidi xo rhendzeleka hi swiaki—swifaniso kumbe swilayidi swa tsalwa—ku fana ni carousel.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Carousel i nkombiso wa swilayidi wo rhendzeleka hi ku tirhisa nxaxamelo wa swilo leswi nga endzeni, lowu akiweke hi ku hundzuka ka CSS 3D na xiphemu xa JavaScript. Yi tirha hi nxaxamelo wa swifaniso, tsalwa kumbe ku fungha loku endleriweke wena. Yi tlhela yi katsa nseketelo wa vulawuri bya khale/leswi landzelaka na swikombiso.

Eka swihlamusela-marito laha API ya ku Vonakala ka Tluka yi seketeriwaka, carousel yi ta papalata ku rhetela loko tluka ra webu ri nga vonaki eka mutirhisi (ku fana na loko thebhu ya xihlamusela-marito yi nga tirhi, fasitere ra xihlamusela-marito ri hungutiwile, na swin’wana).

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Hi kombela u tiva leswaku ti carousels leti nga na swisaka a ti seketeriwi, naswona ti carousels hi ntolovelo a ti fambisani na swipimelo swa ku fikelela.

Xikombiso

Ti carousels a ti tiendli ti normalize ti slide dimensions. Hi ndlela yoleyo, u nga ha lava ku tirhisa switirhisiwa leswi engetelekeke kumbe switayele swa ntolovelo leswaku u pima swilo leswi nga endzeni hi ndlela leyi faneleke. Loko ti carousels ti seketela vulawuri bya khale/lebyi landzelaka na swikombiso, a swi laveki hi ku kongoma. Engetelani u tlhela u endla hi ku landza swilaveko swa wena hilaha u vonaka swi fanerile hakona.

Tlilasi .activeyi lava ku engeteriwa eka yin’wana ya tislaydi handle ka sweswo carousel a yi nge vonaki. Nakambe tiyiseka leswaku u veka yo hlawuleka ideka ya .carouselvulawuri lebyi nga hlawuriwa, ngopfu-ngopfu loko u tirhisa ti- carousel to tala eka tluka rin’we. Swiaki swa vulawuri na xikombiso swi fanele ku va na data-bs-targetxihlawulekisi (kumbe hrefxa swihlanganisi) lexi fambelanaka na idxa .carouselxiaki.

Swilayidi ntsena

Hi leyi carousel leyi nga na swilayidi ntsena. Xiya vukona bya .d-blockna .w-100eka swifaniso swa carousel ku sivela ku ringanisiwa ka swifaniso swa xiviri swa browser.

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

Hi swilawuri

Ku engetela eka vulawuri lebyi hundzeke na lebyi landzelaka. Hi ringanyeta ku tirhisa <button>swiaki, kambe u nga ha tlhela u tirhisa <a>swiaki leswi nga na 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>

Hi swikombiso

U nga ha tlhela u engetela swikombiso eka carousel, etlhelo ka swilawuri, na swona.

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

Hi swifaniso leswi nga ni swifaniso

Engetelani switlhokovetselo eka swilayidi swa wena hi ku olova hi .carousel-captionelemente leyi nga endzeni ka .carousel-item. Ti nga tumbetiwa hi ku olova eka swivono leswitsongo, hilaha swi kombisiweke hakona laha hansi, hi switirhisiwa swo kombisa leswi nga hlawuriwa . Hi ti tumbeta eku sunguleni hi .d-noneivi hi ti vuyisa eka switirhisiwa swa le xikarhi hi .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>

Ku tsemakanya

Engetela .carousel-fadeeka carousel ya wena ku endla leswaku swilayidi swi hanya hi ku cinca ka fade ematshan’weni ya swilayidi.

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

Engetelani data-bs-interval=""eka a .carousel-itemku cinca nkarhi wo hlwela exikarhi ka ku khandziya xikanyakanya hi ku tisungulela eka nchumu lowu landzelaka.

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

Tiyisisa ku swipa hi ku khumba

Ti- carousel ti seketela ku swipa eximatsini/xinene eka switirhisiwa swa touchscreen leswaku u famba-famba exikarhi ka swilayidi. Leswi swi nga tshikiwa hi ku tirhisa data-bs-touchxihlawulekisi. Xikombiso lexi nga laha hansi na xona a xi katsi data-bs-rideattribute naswona xi na data-bs-interval="false"so a xi autoplay.

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

Xivumbeko xa munyama

Engetelani .carousel-darkeka .carouselya vulawuri bya munyama, swikombiso, na swifaniso swa le hansi. Swilawuri swi hundzuriwile ku suka eka ku tata ka swona ko basa ka ntolovelo hi filternhundzu ya CSS. Switlhokovetselo na vulawuri swi na swilo swo engetela swa Sass leswi cinca-cincaka leswi endlaka leswaku colorna 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>

Ku cinca ka ntolovelo

Nkarhi wa ku cinca wa wu .carousel-itemnga cinciwa hi $carousel-transition-durationxihlawulekisi xa Sass ku nga si hlengeletiwa kumbe switayele swa ntolovelo loko u tirhisa CSS leyi hlengeletiweke. Loko ku tirhisiwa ku cinca ko tala, tiyisisa leswaku ku cinca ka ku hundzuka ku hlamuseriwa ku sungula (xikombiso transition: transform 2s ease, opacity .5s ease-out).

Sass

Swilo leswi cinca-cincaka

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

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-bs-slideamukela marito ya nkoka prevkumbe next, leswi cincaka xiyimo xa xilayidi loko xi pimanisiwa ni xiyimo xa xona xa sweswi. Handle ka sweswo, tirhisa data-bs-slide-toku hundzisela xikombo xa swilayidi lexi nga si swekiwaka eka carousel data-bs-slide-to="2", lexi cincaka ndhawu ya xilayidi ku ya eka xikombo xo karhi lexi sungulaka hi 0.

Xihlawulekisi data-bs-ride="carousel"xi tirhisiwa ku fungha carousel tanihi animating ku sukela eka ku layicha pheji. Loko u nga tirhisi data-bs-ride="carousel"ku sungula carousel ya wena, u fanele u yi sungula hi wexe. A yi nge tirhisiwi yi hlanganisiwa na (ku nga laveki na loku nga lavekiki) ku sungula ka JavaScript loku nga erivaleni ka carousel yin’we.

Hi ku tirhisa JavaScript

Fonela carousel hi voko hi:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Swihlawulekisi

Swihlawulekisi swi nga hundzisiwa hi ku tirhisa swihlawulekisi swa data kumbe JavaScript. Eka swihlawulekisi swa datha, engetela vito ra xihlawuhlawu eka data-bs-, tanihi le ka data-bs-interval="".

Vito Muxaka Ku tlula Nhlamuselo
interval nomboro 5000 Nkarhi wo hlwela exikarhi ka ku rhendzeleka ka nchumu wo karhi hi ku tisungulela. Loko false, carousel a yi nge tifambi hi yoxe.
keyboard xitsonga xitsonga true Loko carousel yi fanele yi angula eka swiendlakalo swa khibhodi.
pause ntambhu ya xirhendzevutani | xitsonga xitsonga 'hover'

Loko yi vekiwile eka 'hover', yi yimisa ku rhendzeleka ka carousel eka mouseenterivi yi tlhela yi sungula ku rhendzeleka ka carousel eka mouseleave. Loko u vekiwile eka false, ku rhendzeleka ehenhla ka carousel a swi nge yi yimisi.

Eka switirhisiwa leswi pfuniwaka hi ku khumba, loko swi vekiwile eka 'hover', ku famba hi xikanyakanya ku ta yimanyana ku pfula touchend(loko mutirhisi a hetile ku tirhisana na carousel) ku ringana minkarhi yimbirhi, ku nga si sungula nakambe hi ku tisungulela. Xiya leswaku leswi swi engetela eka mahanyelo ya mbeva lama nga laha henhla.
ride ntambhu ya xirhendzevutani | xitsonga xitsonga false Yi tlanga hi yoxe carousel endzhaku ka loko mutirhisi a rhendzeleka hi voko nchumu wo sungula. Loko yi vekiwile eka 'carousel', yi tlanga hi yoxe carousel loko yi ri eku layicha.
wrap xitsonga xitsonga true Loko carousel yi fanele yi famba hi xikanyakanya yi ya emahlweni kumbe yi va ni swimakiwa swo tika.
touch xitsonga xitsonga true Loko carousel yi fanele ku seketela ku tirhisana ka swipa swa ximatsi/xinene eka switirhisiwa swa touchscreen.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

U nga endla xikombiso xa carousel hi muaki wa carousel, xikombiso, ku sungula hi swihlawulekisi swo engetela na ku sungula ku rhendzeleka hi swilo:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Ndlela Nhlamuselo
cycle Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.
pause Swi yimisa carousel ku famba hi xikanyakanya hi swilo.
prev Swirhendzevutana ku ya eka nchumu lowu hundzeke. Ku tlhelela eka mufoyini nchumu lowu hundzeke wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).
next Swirhendzevutana ku ya eka nchumu lowu landzelaka. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).
nextWhenVisible U nga cycle carousel kuya eka next loko page yinga vonaki kumbe carousel kumbe mutswari wa yona anga vonaki. Ku tlhelela eka mufoyini nchumu lowu kongomisiweke wu nga si kombisiwa
to Ku rhendzeleka ka carousel ku ya eka furemu yo karhi (0 leyi sekeriweke, ku fana na array). Ku tlhelela eka mufoyini nchumu lowu kongomisiweke wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).
dispose Ku herisa carousel ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
getInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa carousel lexi fambelanaka na elemente ya DOM, u nga xi tirhisa hi ndlela leyi:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Ndlela ya static leyi vuyisaka xikombiso xa carousel lexi fambelanaka na elemente ya DOM kutani yi tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi:bootstrap.Carousel.getOrCreateInstance(element)

Swiendlakalo

Tlilasi ya carousel ya Bootstrap yi paluxa swiendlakalo swimbirhi swo khoma eka ntirho wa carousel. Swiendlakalo leswi haswimbirhi swi na swihlawulekisi leswi landzelaka leswi engetelekeke:

  • direction: Ndlela leyi carousel yi rhetaka ha yona (kumbe "left"kumbe "right").
  • relatedTarget: Xiphemu xa DOM lexi nga eku rheleriweni endhawini ya xona tanihi nchumu lowu tirhaka.
  • from: Xikombo xa nchumu wa sweswi
  • to: Xikombo xa nchumu lowu landzelaka

Swiendlakalo hinkwaswo swa carousel swi duvuriwa eka carousel hi yoxe (i.e. eka <div class="carousel">).

Muxaka wa xiendlakalo Nhlamuselo
slide.bs.carousel Yi pfurha hi ku hatlisa loko ku slidevitaniwa ndlela ya xikombiso.
slid.bs.carousel Ku pfuriwa loko carousel yi hetile ku cinca ka yona ka swilayidi. 
var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})