Carousel

Usa ka bahin sa slideshow alang sa pagbisikleta pinaagi sa mga elemento—mga hulagway o mga slide sa teksto—sama sa usa ka carousel.

Giunsa kini paglihok

Ang carousel usa ka slideshow alang sa pagbisikleta pinaagi sa usa ka serye sa sulod, nga gitukod uban sa CSS 3D transforms ug gamay sa JavaScript. Naglihok kini sa usa ka serye sa mga imahe, teksto, o naandan nga marka. Naglakip usab kini sa suporta alang sa nangagi / sunod nga mga kontrol ug mga timailhan.

Sa mga browser diin ang Page Visibility API gisuportahan, ang carousel maglikay sa pag-slide kung ang webpage dili makita sa user (sama sa dihang ang tab sa browser dili aktibo, ang browser window giminusan, ug uban pa).

Palihug hibaloi nga ang mga nested carousel dili suportado, ug ang mga carousel sa kasagaran dili uyon sa mga sumbanan sa accessibility.

Katapusan, kung nagtukod ka sa among JavaScript gikan sa gigikanan, nanginahanglan kiniutil.js .

Pananglitan

Ang mga carousel dili awtomatikong mag-normalize sa mga dimensyon sa slide. Ingon niana, mahimo nimong gamiton ang dugang nga mga gamit o naandan nga mga istilo sa tukma nga gidak-on sa sulud. Samtang ang mga carousel nagsuporta sa nangagi/sunod nga mga kontrol ug mga timailhan, dili kini klaro nga gikinahanglan. Idugang ug ipasibo sumala sa imong nakita nga angay.

Kinahanglan .activenga idugang ang klase sa usa sa mga slide kung dili ang carousel dili makita. Siguruha usab nga magbutang usa ka talagsaon nga id sa .carouselalang sa mga opsyonal nga kontrol, labi na kung naggamit ka daghang mga carousel sa usa ka panid. Ang control ug indicator nga mga elemento kinahanglang adunay data-targetattribute (o hrefpara sa mga link) nga mohaum sa id sa .carouselelemento.

Mga slide lang

Ania ang usa ka carousel nga adunay mga slide lamang. Timan-i ang presensya sa .d-blockug .w-100sa carousel nga mga hulagway aron mapugngan ang default nga pag-align sa imahe sa browser.

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

Uban sa mga kontrol

Pagdugang sa nangagi ug sunod nga mga kontrol:

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

Uban sa mga timailhan

Mahimo usab nimong idugang ang mga timailhan sa carousel, kauban ang mga kontrol, usab.

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

Sa mga caption

Idugang ang mga kapsyon sa imong mga slide nga dali gamit ang .carousel-captionelemento sa sulod sa bisan unsang .carousel-item. Kini dali nga matago sa gagmay nga mga viewport, sama sa gipakita sa ubos, nga adunay opsyonal nga mga gamit sa pagpakita . Among itago kini sa sinugdanan .d-noneug ibalik kini sa medium-sized nga mga himan nga adunay .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>

Crossfade

Idugang .carousel-fadesa imong carousel aron ma-animate ang mga slide gamit ang fade transition imbes nga slide.

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

Indibidwal .carousel-itemnga agwat

Idugang data-interval=""sa a .carousel-itemaron usbon ang gidugayon sa oras sa paglangan tali sa awtomatik nga pagbisikleta ngadto sa sunod nga butang.

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

Paggamit

Pinaagi sa data attributes

Gamita ang data attributes aron dali makontrol ang posisyon sa carousel. data-slidemidawat sa mga keyword prevo next, nga nag-usab sa posisyon sa slide kalabot sa kasamtangan nga posisyon niini. Sa laing paagi, gamita data-slide-toang pagpasa sa usa ka hilaw nga slide index ngadto sa carousel data-slide-to="2", nga mobalhin sa slide position ngadto sa usa ka partikular nga index nga nagsugod sa 0.

Ang data-ride="carousel"attribute kay gigamit sa pagmarka sa carousel isip animating sugod sa page load. Dili kini magamit sa kombinasyon sa (kadaghanan ug wala kinahanglana) klaro nga pagsugod sa JavaScript sa parehas nga carousel.

Pinaagi sa JavaScript

Tawga ang carousel nga mano-mano gamit ang:

$('.carousel').carousel()

Mga kapilian

Ang mga kapilian mahimong ipasa pinaagi sa mga hiyas sa datos o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-interval="".

Pamaagi

.carousel(options)

Nagsugod sa carousel nga adunay opsyonal nga mga kapilian objectug nagsugod sa pagbisikleta sa mga butang.

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

.carousel('cycle')

Naglibot sa mga butang sa carousel gikan sa wala ngadto sa tuo.

.carousel('pause')

Gipahunong ang carousel gikan sa pagbisikleta sa mga butang.

.carousel(number)

I-cycle ang carousel ngadto sa usa ka partikular nga frame (base sa 0, susama sa array). Mibalik sa nagtawag sa wala pa ipakita ang target nga butang (ie sa wala pa slid.bs.carouselmahitabo ang panghitabo).

.carousel('prev')

Mga siklo sa miaging aytem. Mibalik sa nagtawag sa wala pa ipakita ang miaging butang (ie sa wala pa slid.bs.carouselmahitabo ang panghitabo).

.carousel('next')

Mga siklo sa sunod nga aytem. Mibalik sa nagtawag sa wala pa ipakita ang sunod nga butang (ie sa wala pa slid.bs.carouselmahitabo ang panghitabo).

.carousel('dispose')

Giguba ang carousel sa usa ka elemento.

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel. Ang duha ka mga panghitabo adunay mga mosunod nga dugang nga mga kabtangan:

• direction: Ang direksyon diin ang carousel nag-slide (bisan "left"o "right").
• relatedTarget: Ang elemento sa DOM nga gi-slide sa lugar isip aktibo nga butang.
• from: Ang indeks sa kasamtangan nga butang
• to: Ang indeks sa sunod nga aytem

Ang tanan nga mga panghitabo sa carousel gipabuto sa carousel mismo (ie sa <div class="carousel">).

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

Usba ang gidugayon sa pagbalhin

Ang gidugayon sa transisyon sa .carousel-itemmahimong mabag-o sa $carousel-transitionSass variable sa dili pa mag-compile o custom nga mga estilo kung imong gigamit ang giipon nga CSS. Kung daghang mga transisyon ang gipadapat, siguroha nga ang transisyon sa pagbag-o gipasabut una (eg. transition: transform 2s ease, opacity .5s ease-out).