Jukwaa

Kipengele cha onyesho la slaidi cha kuendesha baiskeli kupitia vipengele—picha au slaidi za maandishi—kama jukwa.

Inavyofanya kazi

Jukwaa ni onyesho la slaidi la kuendesha baisikeli kupitia msururu wa maudhui, iliyojengwa kwa mabadiliko ya CSS 3D na JavaScript kidogo. Inafanya kazi na mfululizo wa picha, maandishi, au lebo maalum. Pia inajumuisha usaidizi kwa vidhibiti na viashirio vya awali/vifuatavyo.

Katika vivinjari ambapo API ya Mwonekano wa Ukurasa inatumika, jukwa litaepuka kuteleza wakati ukurasa wa wavuti hauonekani kwa mtumiaji (kama vile kichupo cha kivinjari kinapoacha kutumika, dirisha la kivinjari limepunguzwa, n.k.).

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Tafadhali fahamu kuwa jukwa zilizowekwa kwenye viota haziauniwi, na mizunguko kwa ujumla haiambatani na viwango vya ufikivu.

Mwishowe, ikiwa unaunda JavaScript yetu kutoka kwa chanzo, inahitajiutil.js .

Mfano

Majukwaa hayasawazishi vipimo vya slaidi kiotomatiki. Kwa hivyo, unaweza kuhitaji kutumia huduma za ziada au mitindo maalum ili saizi ya yaliyomo ipasavyo. Ingawa jukwa hutumia vidhibiti na viashirio vya awali/vifuatavyo, hazihitajiki kwa uwazi. Ongeza na ubinafsishe unavyoona inafaa.

Darasa .activelinahitaji kuongezwa kwenye mojawapo ya slaidi vinginevyo jukwa halitaonekana. Pia hakikisha umeweka ya kipekee idkwa .carouselvidhibiti vya hiari, hasa ikiwa unatumia misururu mingi kwenye ukurasa mmoja. Vipengele vya udhibiti na viashiria lazima viwe na data-targetsifa (au hrefkwa viungo) vinavyolingana idna .carouselkipengele.

Slaidi pekee

Hapa kuna jukwa lenye slaidi pekee. Kumbuka uwepo wa picha za jukwa .d-blockna .w-100kwenye jukwa ili kuzuia upangaji wa picha chaguo-msingi wa kivinjari.

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

Pamoja na vidhibiti

Kuongeza katika vidhibiti vilivyotangulia na vifuatavyo. Tunapendekeza kutumia <button>vipengele, lakini pia unaweza kutumia <a>vipengele vilivyo 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>

Pamoja na viashiria

Unaweza pia kuongeza viashiria kwenye jukwa, kando ya vidhibiti, pia.

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

Na manukuu

Ongeza manukuu kwenye slaidi zako kwa urahisi na .carousel-captionkipengele kilicho ndani ya .carousel-item. Zinaweza kufichwa kwa urahisi kwenye tovuti ndogo za kutazama, kama inavyoonyeshwa hapa chini, na huduma za hiari za kuonyesha . Tunazificha mwanzoni .d-nonena kuzirudisha kwenye vifaa vya ukubwa wa wastani vilivyo na .d-md-block.

Lebo ya kwanza ya slaidi

Baadhi ya maudhui ya kishikilia nafasi kwa slaidi ya kwanza.

Lebo ya pili ya slaidi

Baadhi ya maudhui ya kishikilia nafasi kwa slaidi ya pili.

Lebo ya tatu ya slaidi

Baadhi ya maudhui ya kishikilia nafasi kwa slaidi ya tatu.

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

Mtambuka

Ongeza .carousel-fadekwenye jukwa lako ili kuhuisha slaidi kwa mpito wa kufifia badala ya slaidi. Kulingana na yaliyomo kwenye jukwa lako (kwa mfano, slaidi za maandishi pekee), unaweza kutaka kuongeza .bg-bodyau CSS maalum kwa .carousel-items ili kuvuka vizuri.

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

`.carousel-item`Muda wa mtu binafsi

Ongeza data-interval=""kwa a .carousel-itemili kubadilisha muda wa kuchelewesha kati ya kuendesha baiskeli kiotomatiki hadi kipengee kinachofuata.

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

Lemaza kutelezesha kidole kwa kugusa

Miduara inaauni kutelezesha kidole kushoto/kulia kwenye vifaa vya skrini ya kugusa ili kusogeza kati ya slaidi. Hii inaweza kulemazwa kwa kutumia data-touchsifa. Mfano hapa chini pia haujumuishi data-ridesifa na ina data-interval="false"hivyo haichezi kiotomatiki.

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

Matumizi

Kupitia sifa za data

Tumia sifa za data ili kudhibiti kwa urahisi nafasi ya jukwa. data-slideinakubali manenomsingi prevau next, ambayo hubadilisha nafasi ya slaidi kulingana na nafasi yake ya sasa. Vinginevyo, tumia data-slide-tokupitisha faharasa mbichi ya slaidi kwa carousel data-slide-to="2", ambayo huhamisha nafasi ya slaidi hadi faharasa fulani inayoanza na 0.

Sifa data-ride="carousel"hutumika kutia alama kwenye jukwa kama linalohuisha kuanzia kwenye upakiaji wa ukurasa. Ikiwa data-ride="carousel"hutumii kuanzisha jukwa lako, lazima uanzishe mwenyewe. Haiwezi kutumika pamoja na (isiyohitajika na isiyo ya lazima) uanzishaji wa JavaScript ya jukwa moja.

Kupitia JavaScript

Piga jukwa mwenyewe na:

$('.carousel').carousel()

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-, kama katika data-interval="".

Jina	Aina	Chaguomsingi	Maelezo
muda	nambari	5000	Muda wa kuchelewa kati ya kuendesha kipengee kiotomatiki. Ikiwa `false`, jukwa halitazunguka kiotomatiki.
kibodi	boolean	kweli	Ikiwa jukwa linapaswa kuguswa na matukio ya kibodi.
pause	kamba \| boolean	'kurupuka'	Ikiwekwa kuwa `'hover'`, itasitisha uendeshaji wa baiskeli ya jukwa `mouseenter`na kuanza tena uendeshaji wa baisikeli wa jukwa `mouseleave`. Ikiwekwa kuwa `false`, kuelea juu ya jukwa hakutalisitisha. Kwenye vifaa vinavyoweza kugusa, ikiwekwa kuwa `'hover'`, uendeshaji baiskeli utasitishwa `touchend`(mtumiaji atakapomaliza kuingiliana na jukwa) kwa vipindi viwili, kabla ya kuanza tena kiotomatiki. Kumbuka kuwa hii ni pamoja na tabia ya hapo juu ya panya.
panda	kamba	uongo	Hucheza jukwa kiotomatiki baada ya mtumiaji kuzungusha kipengee cha kwanza mwenyewe. Ikiwekwa kuwa `'carousel'`, hucheza jukwa kiotomatiki linapopakia.
kanga	boolean	kweli	Iwapo jukwa linapaswa kuzunguka mfululizo au kusimama kwa bidii.
kugusa	boolean	kweli	Ikiwa jukwa linafaa kuauni mwingiliano wa kutelezesha kidole kushoto/kulia kwenye vifaa vya skrini ya kugusa.

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

`.carousel(options)`

Huanzisha jukwa kwa chaguo za hiari objectna kuanza kuendesha baiskeli kupitia vitu.

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

`.carousel('cycle')`

Huzungusha vitu vya jukwa kutoka kushoto kwenda kulia.

`.carousel('pause')`

Husimamisha jukwa lisiendeshe baiskeli kupitia vitu.

`.carousel(number)`

Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu). Hurejesha kwa mpigaji simu kabla ya kipengee lengwa kuonyeshwa (yaani kabla ya slid.bs.carouseltukio kutokea).

`.carousel('prev')`

Mizunguko ya kipengee kilichotangulia. Hurejesha kwa mpigaji simu kabla ya bidhaa iliyotangulia kuonyeshwa (yaani kabla ya slid.bs.carouseltukio kutokea).

`.carousel('next')`

Mizunguko hadi kipengee kinachofuata. Hurejesha kwa mpigaji simu kabla ya bidhaa inayofuata kuonyeshwa (yaani kabla ya slid.bs.carouseltukio kutokea).

`.carousel('dispose')`

Huharibu jukwa la kipengele.

`.carousel('nextWhenVisible')`

Usizungushe jukwa hadi linalofuata wakati ukurasa hauonekani au jukwa au mzazi wake hauonekani. Hurejesha kwa mpigaji simu kabla ya bidhaa inayofuata kuonyeshwa (yaani kabla ya slid.bs.carouseltukio kutokea).

`.carousel('to')`

Huzungusha jukwa hadi fremu fulani (0 msingi, sawa na safu). Hurejesha kwa mpigaji simu kabla ya bidhaa inayofuata kuonyeshwa (yaani kabla ya slid.bs.carouseltukio kutokea).

Matukio

Darasa la jukwa la Bootstrap linafichua matukio mawili ya kuunganisha kwenye utendakazi wa jukwa. Matukio yote mawili yana sifa zifuatazo za ziada:

direction: Mwelekeo ambao jukwa linateleza (ama "left"au "right").
relatedTarget: Kipengele cha DOM ambacho kinatelezeshwa mahali kama kipengee kinachotumika.
from: Faharasa ya kipengee cha sasa
to: Faharasa ya kipengee kinachofuata

Matukio yote ya jukwa hupigwa risasi kwenye jukwa lenyewe (yaani kwenye <div class="carousel">).

Aina ya Tukio	Maelezo
slaidi.bs.jukwa	Tukio hili huwaka mara moja `slide`mbinu ya mfano inapotumika.
slid.bs.jukwa	Tukio hili huwashwa wakati jukwa limekamilisha mpito wake wa slaidi.

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Badilisha muda wa mpito

Muda wa mpito wa .carousel-itemunaweza kubadilishwa na utofauti wa $carousel-transitionSass kabla ya kutunga au mitindo maalum ikiwa unatumia CSS iliyokusanywa. Iwapo mabadiliko mengi yatatumika, hakikisha ubadilishaji wa ubadilishaji umefafanuliwa kwanza (km. transition: transform 2s ease, opacity .5s ease-out).