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.

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

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

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

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "right").
  • relatedTarget: The DOM element that is being slid into place as the active item.
  • from: The index of the current item
  • to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event Type Description
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).