Source

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

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

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

Carousel awmna hmun awlsam taka control turin data attribute hmang 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. 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 mouseentercycling chu a chhunzawm leh mouseleaveang. -a dah a nih chuan falsecarousel chunga hovering hian a pause dawn lo.

Touch-enabled device-ah chuan -a set a nih chuan "hover", cycling chu touchendinterval 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 slideinstance 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).