in English

Carousel

He waahanga whakaatakiriata mo te eke paihikara i roto i nga huānga—whakaahua, kiriata ranei o te tuhinga—penei i te carousel.

Me pehea te mahi

Ko te carousel he whakaatakiriata mo te eke paihikara i roto i te raupapa o nga ihirangi, i hangaia me nga huringa CSS 3D me tetahi waahanga JavaScript. Ka mahi me te raupapa whakaahua, tuhinga, tohu tohu ritenga ranei. Kei roto hoki i te tautoko mo nga mana whakahaere o mua/muri me nga tohu.

I roto i nga kaitirotiro kei te tautokohia te API Tirohanga Whārangi , ka kore te carousel e paheke ina kore te wharangi paetukutuku e kitea e te kaiwhakamahi (penei i te wa e hohekore ana te ripa tirotiro, ka whakaitihia te matapihi tirotiro, me etahi atu).

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Kia mohio koe kaore i te tautokohia nga carousels kohanga, karekau hoki nga carousels e tau ana ki nga paerewa urunga.

Ka mutu, mena kei te hanga koe i to maatau JavaScript mai i te puna, meutil.js .

Tauira

Ko nga carousels e kore e whakarite aunoa i nga rahi kiriata. Na tenei, ka hiahia pea koe ki te whakamahi i etahi atu taputapu, momo ritenga ranei kia tika te rahi o nga ihirangi. Ahakoa e tautoko ana nga carousels i nga mana me nga tohu o mua/panuku, kaore e tino hiahiatia ana. Tāpirihia me te whakarite kia rite ki taau e pai ai.

Me .activetaapiri te karaehe ki tetahi o nga kiriata kei kore e kitea te carousel. Me whakarite hoki ki te whakatakoto i tetahi mea motuhake idmo nga .carouselmana whiriwhiri, ina koa kei te whakamahi koe i nga carousels maha i runga i te wharangi kotahi. Ko nga huānga mana me te tohu me whai data-targethuanga ( hrefmo nga hononga ranei) e rite ana ki te ido te .carouselhuānga.

Kiriata anake

Anei he carousel me nga kiriata anake. Kia mahara ki te noho o nga whakaahua carousel .d-blockme .w-100runga ki te aukati i te tirohanga atahanga taunoa.

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

Me nga mana whakahaere

Te taapiri i nga mana o mua me muri. Ka tūtohu matou ki te whakamahi i <button>nga huānga, engari ka taea hoki e koe te whakamahi i <a>nga huānga me te 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>

Me nga tohu

Ka taea hoki te taapiri i nga tohu ki te carousel, ki te taha o nga mana whakahaere.

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

Me nga tapanga

Tāpiri tapanga ki o kiriata me te .carousel-captionhuānga i roto i tetahi .carousel-item. Ka taea te huna i runga i nga tauranga tiro iti ake, penei i raro nei, me nga taputapu whakaatu . Ka huna e matou i te tuatahi me .d-nonete whakahoki mai i runga i nga taputapu reo-rahi me te .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>

Whakawhitiwhiti

Taapirihia .carousel-fadeki to carousel hei whakakorikori i nga kiriata me te whakawhiti memenge hei utu mo te kiriata. I runga i to ihirangi carousel (hei tauira, ko nga kiriata tuhinga anake), ka hiahia pea koe ki te taapiri .bg-bodyi etahi CSS ritenga ranei ki te .carousel-items mo te whakawhiti tika.

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

Tāpirihia data-interval=""ki a .carousel-itemhei huri i te nui o te wā ki te whakaroa i waenga i te paihikara aunoa ki te mea e whai ake nei.

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

Monokia te pa swiping

Ka tautokohia e nga Carousels te swipe maui/matau i runga i nga taputapu mata pa ki te neke i waenga i nga kiriata. Ka taea te whakakore i tenei ma te whakamahi i te data-touchhuanga. Ko te tauira i raro nei kaore ano i te whakauru i te data-ridehuanga, data-interval="false"na reira kaore e purei aunoa.

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

Whakamahinga

Ma nga huanga raraunga

Whakamahia nga huanga raraunga kia ngawari te whakahaere i te tuunga o te carousel. data-slideka whakaae ki nga kupumatua prev, next, e whakarereke ana i te tuunga kiriata e pa ana ki tona turanga o naianei. Arā, whakamahia data-slide-toki te tuku i te taupū kiriata mata ki te carousel data-slide-to="2", ka huri i te tūnga kiriata ki tetahi taupū ka timata ki te 0.

Ka data-ride="carousel"whakamahia te huanga ki te tohu i te carousel hei whakaohooho timata mai i te utaina o te wharangi. Ki te kore koe e whakamahi data-ride="carousel"ki te arawhiti i to carousel, me arawhiti koe i a koe. Kaore e taea te whakamahi me te (he nui me te kore e tika) te arawhiti JavaScript o taua carousel.

Ma te JavaScript

Waea a ringa ki te carousel me:

$('.carousel').carousel()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-interval="".

Ingoa Momo Taunoa Whakaahuatanga
wā tau 5000 Te nui o te wa ki te whakaroa i waenga i te paihikara aunoa i tetahi mea. Mena false, karekau te carousel e huri aunoa.
papapātuhi boolean pono Mena ka tauhohe te carousel ki nga takahanga papapātuhi.
okioki aho | boolean 'whakapapa'

Ki te tautuhia ki te 'hover', whakataa te paihikara o te carousel ki runga mouseenterka haere ano te paihikara o te carousel i runga mouseleave. Mena ka tautuhia ki te false, ma te whakaparo ki runga i te carousel e kore e okioki.

I runga i nga taputapu pa-whakahohea, ina tautuhia ki te 'hover', ka okioki te paihikara touchend(ka mutu te taunekeneke a te kaiwhakamahi me te carousel) mo nga wa e rua, i mua i te whakaara ano. Kia mahara he taapiri tenei ki te whanonga kiore i runga ake nei.
ekenga aho teka Ka purei aunoa i te carousel i muri i te huringa a te kaiwhakamahi i te mea tuatahi. Ki te tautuhi ki te 'carousel', ka purei aunoa i te carousel i runga i te uta.
takai boolean pono Mena ka huri haere tonu te carousel, me kaha ranei te aukati.
pa boolean pono Mena ka tautokohia e te carousel nga taunekeneke swipe maui/matau i runga i nga taputapu mata pa.

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

.carousel(options)

Ka arataki i te carousel me etahi whiringa objectka tiimata ka timata te paihikara i roto i nga taonga.

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

.carousel('cycle')

Ka huri i nga taonga carousel mai i te maui ki te matau.

.carousel('pause')

Ka aukati te carousel i te eke paihikara ma nga taonga.

.carousel(number)

Ka huri i te carousel ki tetahi anga (0 te ahua, he rite ki te huranga). Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea i whäia (arä i mua i te slid.bs.carouselputa o te takahanga).

.carousel('prev')

Ka huri ki te mea o mua. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea o mua (ara i mua i te slid.bs.carouselputa o te takahanga).

.carousel('next')

Ka huri ki te tuemi e whai ake nei. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea e whai ake nei (arā i mua i te slid.bs.carouselputa o te takahanga).

.carousel('dispose')

Ka whakangaro i te carousel o tetahi huānga.

.carousel('nextWhenVisible')

Kaua e huri i te carousel ki muri ka kore e kitea te wharangi, kaore ranei te carousel, tona matua ranei e kitea. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea e whai ake nei (arā i mua i te slid.bs.carouselputa o te takahanga).

.carousel('to')

Ka huri i te carousel ki tetahi anga (0 te ahua, he rite ki te huranga). Ka hoki ki te kaiwaea i mua i te whakaaturanga o te mea e whai ake nei (arā i mua i te slid.bs.carouselputa o te takahanga).

Nga huihuinga

Ko te karaehe carousel a Bootstrap e whakaatu ana i nga huihuinga e rua mo te hono ki te mahi carousel. Ko nga huihuinga e rua nga waahanga taapiri e whai ake nei:

  • direction: Ko te ahunga e retireti ana te carousel (ranei "left", "right").
  • relatedTarget: Ko te huānga DOM kei te reheke ki te waahi hei taonga hohe.
  • from: Te taupū o te tūemi o nāianei
  • to: Te taupū o te tūemi e whai ake nei

Ko nga huihuinga carousel katoa ka puhia ki te carousel ake (arā, ki te <div class="carousel">).

Momo Takahanga Whakaahuatanga
slide.bs.carousel Ka puhipuhi tonu tenei takahanga ina ka tonohia te slidearatuka tauira.
slid.bs.carousel Ka pupuhihia tenei takahanga ina oti ana te carousel i tana whakawhiti kiriata. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Hurihia te roanga whakawhiti

.carousel-itemKa taea te huri i te roanga whakawhiti o te $carousel-transitiontaurangi Sass i mua i te whakahiato, i nga momo ritenga ranei mena kei te whakamahi koe i te CSS kua whakahiato. Mena ka tukuna nga whakawhitinga maha, me mohio kua tautuhia te whakawhitinga huringa i te tuatahi (hei tauira transition: transform 2s ease, opacity .5s ease-out).