in English

Xigwitsirisi

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

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.

Xo hetelela, loko u aka JavaScript ya hina ku suka eka xihlovo, swi lavautil.js .

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-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-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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. Ku ya hi nhundzu ya wena ya carousel (xikombiso, swilayidi swa matsalwa ntsena), u nga ha lava ku engetela .bg-bodykumbe CSS yin’wana ya ntolovelo eka .carousel-items ku kuma crossfading leyi faneleke.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Engetelani data-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-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-touchxihlawulekisi. Xikombiso lexi nga laha hansi na xona a xi katsi data-rideattribute naswona xi na data-interval="false"so a xi autoplay.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-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-slide-toku hundzisela xikombo xa swilayidi lexi nga si swekiwaka eka carousel data-slide-to="2", lexi cincaka ndhawu ya xilayidi ku ya eka xikombo xo karhi lexi sungulaka hi 0.

Xihlawulekisi data-ride="carousel"xi tirhisiwa ku fungha carousel tanihi animating ku sukela eka ku layicha pheji. Loko u nga tirhisi data-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:

$('.carousel').carousel()

Swihlawulekisi

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

Vito Muxaka Ku tlula Nhlamuselo
nkarhi wo leha nomboro 5000 wa vanhu Nkarhi wo hlwela exikarhi ka ku rhendzeleka ka nchumu wo karhi hi ku tisungulela. Loko false, carousel a yi nge tifambi hi yoxe.
xikhiya xa xikhiya xitsonga xitsonga ntiyiso Loko carousel yi fanele yi angula eka swiendlakalo swa khibhodi.
yimanyana 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.
khandziya ntambu vunwa 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.
phutsela xitsonga xitsonga ntiyiso Loko carousel yi fanele yi famba hi xikanyakanya yi ya emahlweni kumbe yi va ni swimakiwa swo tika.
khumba xitsonga xitsonga ntiyiso 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 .

.carousel(options)

Ku sungula carousel hi swihlawulekisi swo hlawula objectivi a sungula ku khandziya xikanyakanya hi swilo.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.

.carousel('pause')

Swi yimisa carousel ku famba hi xikanyakanya hi swilo.

.carousel(number)

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 (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('prev')

Swirhendzevutana ku ya eka nchumu lowu hundzeke. Ku tlhelela eka mufoyini nchumu lowu hundzeke wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('next')

Swirhendzevutana ku ya eka nchumu lowu landzelaka. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('dispose')

Ku herisa carousel ya elemente.

.carousel('nextWhenVisible')

U nga rhendzeleki carousel ku ya eka next loko pheji yi nga vonaki kumbe carousel kumbe mutswari wa yona a nga vonaki. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

.carousel('to')

Ku rhendzeleka ka carousel ku ya eka furemu yo karhi (0 leyi sekeriweke, ku fana na array). Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (hileswaku slid.bs.carouselxiendlakalo xi nga si humelela).

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
xilayidi.bs.xirhendzevutani Xiendlakalo lexi xi pfurha hi ku hatlisa loko ku slidevitaniwa ndlela ya xikombiso.
xirhendzevutani.bs.carousel Xiendlakalo lexi xi duvuriwa loko carousel yi hetile ku cinca ka yona ka swilayidi. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Cinca nkarhi wa ku cinca

Nkarhi wa ku cinca wa wu .carousel-itemnga cinciwa hi $carousel-transitionxihlawulekisi 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).