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 tur 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 a ni. 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. Tin, for optional controls ah hian unique id set ngei ang che .carousel, a bik takin page khata carousel tam tak i hman chuan. Control leh indicator element te hian element id nena inmil data-targetattribute (or for links) an nei tur a ni.href.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 lo awm tur ah te dah belh leh ila:

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

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

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

Nulla vitae elit libero, chawhmeh (pharetra augue mollis interdum) tih a ni.

Slide label pahnihna

A rilru a buai em em a, a rilru a hah em em bawk a. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slide label pathumna

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. vel scelerisque nisl consectetur.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade a ni

.carousel-fadeSlide ni lovin fade transition hmanga slide animate turin i carousel ah dah la .

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

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

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 . 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. Dik lo a nih chuan carousel hian 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" tih a ni.	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. "Carousel" a nih chuan, load laiin carousel chu a autoplay thin.
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 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.

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