Source

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

Unang slide label

Nulla vitae elit libero, usa ka pharetra augue mollis interdum.

Ikaduha nga slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ikatulo nga slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

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-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>
  <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. 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 awtomatik nga pagbisikleta sa usa ka butang. Kung bakak, ang carousel dili awtomatik nga mag-cycle.
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 "carousel", 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 aparato nga touchscreen.

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.

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

Uri sa Hitabo	Deskripsyon
slide.bs.carousel	Kini nga panghitabo modilaab dayon kung ang `slide`pamaagi sa pananglitan 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).