Carousel hmanga siam a ni

Carousel ang chi element—image emaw, thuziak slide emaw—a cycle-a kal theihna tur slideshow component.

A hnathawh dan

Carousel hi content hrang hrang cycle-a kal theihna slideshow a ni a, CSS 3D transform leh JavaScript tlem hmanga siam a ni. Image, text emaw custom markup emaw series hmangin a thawk thei. Control leh indicator hmasa/a awm tawhte thlawpna a keng tel bawk.

Page Visibility API support -na browser-ah chuan webpage chu user-in a hmuh theih loh hunah (browser tab a inactive lai te, browser window a minimized lai te, etc. ang chi te) hian carousel chu a slide loh ang.

He component hian animation effect hi prefers-reduced-motionmedia query ah a innghat a ni. Kan accessibility documentation a reduced motion tih hi en la .

Nested carousel te hi an support lo tih hre reng ang che, carousel te hi a tlangpuiin accessibility standards an zawm lo tih hre reng ang che.

A tawp berah chuan kan JavaScript hi source atanga i siam a nih chuanutil.js .

Entirna

Carousel hian slide dimension chu a normalize nghal vek lo. Chutiang a nih avang chuan, content size dik tak siam turin utility dang emaw custom style dang emaw i hmang a ngai mai thei. Carousel hian control leh indicator hmasa/a awm tawhte a support laiin, chiang takin a mamawh lo. I duh angin add la, customize rawh.

Class chu .activeslide pakhatah dah belh a ngai a nih loh chuan carousel chu a lang lo ang. idTin, optional controls atan unique on the set ngei ang che .carousel, a bik takin page khata carousel tam tak i hman chuan. Control leh indicator element te hian data-targetattribute (or for links) an neih a ngai a, chu chu element hrefnen a inmil tur a ni.id.carousel

Slides chauh a awm

Hetah hian carousel pakhat slide chauh awmna a awm. Browser default image alignment awm loh nan carousel images-a .d-blockleh awm chu chhinchhiah ang che ..w-100

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

Controls te nen

Control hmasa leh dang ah te dah belh. Element hman kan rawt <button>a, mahse .<a>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>

Indicator te nen

Carousel-ah hian indicator te pawh i dah thei bawk a, controls te nen pawh.

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

Caption te nen

I slide-ah awlsam takin caption dah la, .carousel-captionelement awmin any .carousel-item. Viewport tenau zawkah awlsam takin an thup thei a, a hnuaia kan hmuh ang hian, optional display utilities hmangin an thup thei bawk . A tir lamah chuan kan thup a .d-none, medium-sized device-ah kan rawn hruai kir leh a, .d-md-block.

Slide label hmasa ber

Slide hmasa ber atan hian representative placeholder content thenkhat.

Slide label pahnihna

Slide pahnihna atan hian representative placeholder content thenkhat.

Slide label pathumna

Slide pathumna atan hian representative placeholder content thenkhat.

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

.carousel-fadeSlide ni lovin fade transition hmanga slide animate turin i carousel ah dah la . I carousel content (eg, text only slides) a zirin, crossfading dik tak neih theih nan s-ah .bg-bodyhian custom CSS engemaw zat emaw i dah duh mai thei..carousel-item

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

Mimal `.carousel-item`inkar a ni

Add data-interval=""to a .carousel-itemto the next item-a automatic-a cycling inkara delay hun tur thlak tur.

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

Touch swiping kha tihtawp theih a ni

Carousels hian touchscreen device-a slide inkara kal theihna turin left/right swipe a support a ni. data-touchHei hi attribute hmangin disable theih a ni . data-rideA hnuaia entirnan hian attribute a huam lo a, a nei bawk a data-interval="false", chuvang chuan autoplay a nei lo.

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

Hman dan tur

Data attribute hmangin a ni

Data attribute hmangin awlsam takin carousel awmna tur control rawh. data-slidekeywords prevor next, chu a pawm a, chu chuan slide awmna chu a awmna hmun nen khaikhin chuan a thlak danglam a ni. A dang pawhin, data-slide-toraw slide index chu carousel-ah pass turin hmang la data-slide-to="2", chu chuan slide awmna chu index bik pakhatah a sawn a, chu chu 0.

data-ride="carousel"Attribute hi page load atanga tan carousel chu animating anga mark nan hman a ni . data-ride="carousel"I carousel initialize nan i hmang lo a nih chuan nangmah ngeiin i initialize a ngai a ni. Carousel khata (redundant leh a tul lo) explicit JavaScript initialization nen hman dun theih a ni lo.

JavaScript hmangin

Carousel chu manual-in call la, hetiang hian:

$('.carousel').carousel()

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-interval="".

Hming	Lampang	Hlawhchhamna	Hrilhfiahna
inkar a ni	a zat	5000 a ni	Item pakhat automatic-a cycle-a tihkhawtlai hun chhung. If `false`, carousel chu automatic in a cycle dawn lo.
keyboard hmangin a ziak a	boolean a ni	dik	Keyboard thil thlengah carousel hian a chhan let tur em tih.
chawl	string \| boolean a ni	'hover' a ti a.	A set a nih chuan `'hover'`carousel on cycling chu a pause a, carousel on `mouseenter`cycling chu a chhunzawm leh `mouseleave`ang. -a dah a nih chuan `false`carousel chunga hovering hian a pause dawn lo. Touch-enabled device-ah chuan -a set a nih chuan `'hover'`, cycling chu `touchend`interval hnih chhung (user-in carousel nena a inbiak zawh chuan) a pause ang a, chutah chuan automatic-in a chhunzawm leh ang. Hei hi a chunga mouse awm dan bakah a ni tih hre reng ang che.
chuang	hrui	diklo	User-in item hmasa ber chu manual-a a cycle hnuah carousel chu a autoplay leh thin. -a set a nih chuan `'carousel'`carousel chu load laiin a autoplay ang.
tuam	boolean a ni	dik	Carousel chu cycle chhunzawm zel tur nge hard stop neih tur tih.
khawih	boolean a ni	dik	Carousel hian touchscreen device-a left/right swipe interaction a support tur em tih.

Thiltih dan tur

Asynchronous method leh inthlak danglamna te

API method zawng zawng hi asynchronous a ni a , transition a tan vek a ni . Transition an tan veleh mahse a tawp hmain call tu hnenah an kir leh thin . Chu bakah, transitioning component-a method call chu ngaihthah a ni ang .

Hriat belh duh chuan kan JavaScript documentation en rawh .

`.carousel(options)`

Carousel chu optional options hmangin a initialize a, objectitem hrang hrang hmangin cycle a kal tan thin.

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

`.carousel('cycle')`

Carousel thilte chu veilam atanga dinglam thlengin a cycle a.

`.carousel('pause')`

Carousel chu thil kal tlanga cycle a kal theih loh nan a titawp.

`.carousel(number)`

Carousel chu frame pakhatah a cycle (0 based, array ang chi). Target item a lan hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin .slid.bs.carousel

`.carousel('prev')`

Item hmasa lam chu a cycle a. Item hmasa a lan hmain (chu chu event a thlen hmain) caller hnenah a kir leh thin .slid.bs.carousel

`.carousel('next')`

Item dang lam pan chuan a cycle a. Item dang a lan hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin .slid.bs.carousel

`.carousel('dispose')`

Element pakhat carousel a tichhia.

`.carousel('nextWhenVisible')`

Page hmuh theih loh emaw, carousel emaw a nu leh pa emaw hmuh theih loh hunah carousel chu next-ah cycle suh. Item dang a lan hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin .slid.bs.carousel

`.carousel('to')`

Carousel chu frame pakhatah a cycle (0 based, array ang chi). Item dang a lan hmain (chu chu event a thlen hmain ) caller hnenah a kir leh thin .slid.bs.carousel

Thil thlengte

Bootstrap-a carousel class hian carousel functionality-a hooking-na tur event pahnih a pholang a ni. Event pahnih hian a hnuaia additional property te hi an nei vek a ni:

direction: Carousel a tlan chhuahna lam (either "left"or "right").
relatedTarget: Active item anga a hmuna slid tur DOM element.
from: Tuna thil awm mek index a ni
to: Item lo awm tur index a ni

Carousel event zawng zawng hi carousel ngeiah (ie at the <div class="carousel">).

Thil thleng chi hrang hrang	Hrilhfiahna
slide.bs.carousel a ni	He event hi `slide`instance method invoke a nih chuan a fire nghal vek a ni.
slid.bs.carousel tih a ni	He event hi carousel-in a slide transition a zawh hunah a kah chhuak thin.

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

Transition hun chhung thlak danglam

Transition duration of hi compiling hmain Sass variable hmangin i .carousel-itemthlak thei a , compiled CSS i hman chuan custom styles hmangin i thlak thei bawk. $carousel-transitionMultiple transition hman a nih chuan transform transition chu define hmasa phawt tur a ni (eg. transition: transform 2s ease, opacity .5s ease-out).