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

Ang epekto sa animation niini nga sangkap nagdepende sa prefers-reduced-motionpangutana sa media. Tan-awa ang gikunhod nga seksyon sa paglihok sa among dokumentasyon sa accessibility .

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, kinahanglan nimo nga mogamit dugang nga mga gamit o naandan nga istilo aron tukma nga gidak-on ang sulud. Samtang gisuportahan sa mga carousel ang 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 idsa .carouselpara 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 idsa .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 hulagway 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 miaging ug sunod nga mga kontrol. Girekomenda namon ang paggamit sa <button>mga elemento, apan mahimo usab nimo gamiton ang <a>mga elemento nga adunay 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>

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

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.

Unang slide label

Ang ubang mga representante sa placeholder content alang sa unang slide.

Ikaduha nga slide label

Ang ubang mga representante sa placeholder content alang sa ikaduhang slide.

Ikatulo nga slide label

Ang ubang mga representante sa placeholder content alang sa ikatulo nga slide.

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

Crossfade

Idugang .carousel-fadesa imong carousel aron ma-animate ang mga slide gamit ang fade transition imbes nga slide. Depende sa imong carousel content (eg, text only slides), mahimo nimong idugang .bg-bodyo pipila ka custom CSS sa .carousel-items para sa saktong crossfading.

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

Indibidwal `.carousel-item`nga 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>
  <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>

I-disable ang touch swiping

Gisuportahan sa mga carousel ang pag-swipe sa wala/tuo sa mga touchscreen device aron makalihok tali sa mga slide. Mahimo kining ma-disable gamit ang data-touchattribute. Ang panig-ingnan sa ubos wala usab maglakip sa data-ridehiyas ug adunay data-interval="false"aron dili kini mag-autoplay.

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

Paggamit

Pinaagi sa data attributes

Gamit ug data attributes para 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. Kung dili nimo gamiton data-ride="carousel"ang pagsugod sa imong carousel, kinahanglan nimo nga unahon kini sa imong kaugalingon. 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="".

Ngalan	Matang	Default	Deskripsyon
agwat	numero	5000	Ang gidugayon sa paglangan tali sa awtomatikong pagbisikleta sa usa ka butang. Kung `false`, ang carousel dili awtomatikong moliko.
keyboard	boolean	tinuod	Kung ang carousel kinahanglan nga mo-react sa mga panghitabo sa keyboard.
paghunong	hilo \| boolean	'lutaw'	Kung itakda sa `'hover'`, ihunong ang pagbisikleta sa carousel sa `mouseenter`ug ipadayon ang pagbisikleta sa carousel sa `mouseleave`. Kung itakda sa `false`, ang pag-hover sa carousel dili mopahunong niini. Sa touch-enabled nga mga device, kung i-set sa `'hover'`, ang pagbisikleta mohunong sa `touchend`(sa higayon nga ang user mahuman sa interaksyon sa carousel) sulod sa duha ka mga agwat, sa dili pa awtomatikong ipadayon. Timan-i nga kini dugang sa naa sa ibabaw nga kinaiya sa mouse.
sakay	hilo	bakak	I-autoplay ang carousel human manu-mano nga i-cycle sa user ang unang butang. Kung itakda sa `'carousel'`, i-autoplay ang carousel sa load.
putos	boolean	tinuod	Kung ang carousel kinahanglan nga magpadayon sa pag-ikot o adunay lisud nga paghunong.
paghikap	boolean	tinuod	Kung kinahanglan ba nga suportahan sa carousel ang wala / tuo nga mga interaksyon sa pag-swipe sa mga touchscreen nga aparato.

Pamaagi

Asynchronous nga mga pamaagi ug transisyon

Ang tanan nga mga pamaagi sa API kay asynchronous ug magsugod ug transisyon . Mibalik sila sa nanawag sa diha nga nagsugod ang transisyon apan sa wala pa kini matapos . Dugang pa, ang usa ka paagi sa pagtawag sa usa ka transisyon nga sangkap dili tagdon .

Tan-awa ang among JavaScript nga dokumentasyon para sa dugang nga impormasyon .

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

`.carousel('nextWhenVisible')`

Ayaw i-cycle ang carousel ngadto sa sunod kung ang panid dili makita o ang carousel o ang ginikanan niini dili makita. Mibalik sa nagtawag sa wala pa ipakita ang sunod nga butang (ie sa wala pa slid.bs.carouselmahitabo ang panghitabo).

`.carousel('to')`

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 sunod nga butang (ie sa wala pa slid.bs.carouselmahitabo ang panghitabo).

Mga panghitabo

Ang klase sa carousel sa Bootstrap nagbutyag sa duha ka mga panghitabo alang sa pag-hook sa pagpaandar sa carousel. Ang duha nga 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">).

Uri sa Hitabo	Deskripsyon
slide.bs.carousel	Kini nga panghitabo mobuto dayon kung ang `slide`pamaagi sa instance gigamit.
slid.bs.carousel	Kini nga panghitabo gipabuto kung nahuman na sa carousel ang pagbalhin sa slide niini.

$('#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).