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.

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 te tautoko mo nga mana whakahaere me nga tohu o mua/muri.

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 mohio hoki ki te tautuhi i tetahi id ahurei ki runga .carouselmo nga mana 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 id o 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:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Whakawhitiwhiti

Taapirihia .carousel-fadeki to carousel hei whakakorikori i nga kiriata me te whakawhiti memenge hei utu mo te kiriata.

<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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 ringatia 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 he teka, e kore e huri aunoa a carousel.
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 whakaroa.

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. Mena "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 pupuhihia 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).