Carousel hmanga siam a ni
Carousel ang chi element—image emaw, thuziak slide emaw—a cycle-a kal theihna tur slideshow component.
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.
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
.
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.
Optional controls atan hian unique id set ngei ang che .carousel
, a bik takin page khata carousel tam tak i hman chuan.
Hetah hian carousel pakhat slide chauh awmna a awm. Browser default image alignment awm loh nan carousel images-a .d-block
leh awm chu chhinchhiah ang che ..img-fluid
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
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 class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</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>
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 class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</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>
Initial active element a ngai a ni
Class chu .active
slide pakhatah dah belh a ngai a ni. Chutiang a nih loh chuan carousel chu a lang lo ang.
I slide-ah awlsam takin caption dah la, .carousel-caption
element 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
.
Carousel awmna hmun awlsam taka control turin data attribute hmang rawh. data-slide
keywords prev
or 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-to
raw 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.
Carousel chu manual-in call la, hetiang hian:
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 Touch-enabled device-ah chuan -a set a nih chuan |
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. |
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 .
Carousel chu optional options hmangin a initialize a, object
item hrang hrang hmangin cycle a kal tan thin.
Carousel thilte chu veilam atanga dinglam thlengin a cycle a.
Carousel chu thil kal tlanga cycle a kal theih loh nan a titawp.
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
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
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
Element pakhat carousel a tichhia.
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 nito
: 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. |