Source

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

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Whakawhitiwhiti

Tāpirihia .carousel-fadeki tō 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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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

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.

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