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.
prefers-reduced-motion
media 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.
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 .active
slide pakhatah dah belh a ngai a nih loh chuan carousel chu a lang lo ang. id
Tin, 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-bs-target
attribute (or for links) an neih a ngai a, chu chu element href
nen 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-block
leh awm chu chhinchhiah ang che ..w-100
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Caption te nen
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
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade a ni
.carousel-fade
Slide ni lovin fade transition hmanga slide animate turin i carousel ah dah la .
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Mimal .carousel-item
inkar a ni
Add data-bs-interval=""
to a .carousel-item
to the next item-a automatic-a cycling inkara delay hun tur thlak tur.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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-bs-touch
Hei hi attribute hmangin disable theih a ni . data-bs-ride
A hnuaia entirnan hian attribute a huam lo a, a nei bawk a data-bs-interval="false"
, chuvang chuan autoplay a nei lo.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Dark variant a ni
Control, indicator leh caption thim zawkte tan chuan add .carousel-dark
to the ah hian dah rawh. .carousel
Controls te chu an default white fill atang khan filter
CSS property hmangin an invert tawh a. Caption leh control ah hian Sass variable dang a awm a, chu chuan color
leh background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<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" data-bs-interval="2000">
<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-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Custom hmanga inthlak danglamna
Transition duration of hi compiling hmain Sass variable hmangin i .carousel-item
thlak thei a , compiled CSS i hman chuan custom styles hmangin i thlak thei bawk. $carousel-transition-duration
Multiple transition hman a nih chuan transform transition chu define hmasa phawt tur a ni (eg. transition: transform 2s ease, opacity .5s ease-out
).
Sass a ni
Variables te pawh a awm
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Hman dan tur
Data attribute hmangin a ni
Carousel awmna hmun awlsam taka control turin data attribute hmang rawh. data-bs-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-bs-slide-to
raw slide index chu carousel-ah pass turin hmang la data-bs-slide-to="2"
, chu chuan slide awmna chu index bik pakhatah a sawn a, chu chu 0
.
data-bs-ride="carousel"
Attribute hi page load atanga tan carousel chu animating anga mark nan hman a ni . data-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
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-bs-
, data-bs-interval=""
.
Hming | Lampang | Hlawhchhamna | Hrilhfiahna |
---|---|---|---|
interval |
a zat | 5000 |
Item pakhat automatic-a cycle-a tihkhawtlai hun chhung. If false , carousel chu automatic in a cycle dawn lo. |
keyboard |
boolean a ni | true |
Keyboard thil thlengah carousel hian a chhan let tur em tih. |
pause |
string | boolean a ni | 'hover' |
A set a nih chuan Touch-enabled device-ah chuan -a set a nih chuan |
ride |
string | boolean a ni | false |
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. |
wrap |
boolean a ni | true |
Carousel chu cycle chhunzawm zel tur nge hard stop neih tur tih. |
touch |
boolean a ni | true |
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 .
Carousel constructor hmangin carousel instance i siam thei a, entirnan, option dang hmanga initialize tur leh item hrang hrang hmanga cycling tan tur:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Tihdan | Hrilhfiahna |
---|---|
cycle |
Carousel thilte chu veilam atanga dinglam thlengin a cycle a. |
pause |
Carousel chu thil kal tlanga cycle a kal theih loh nan a titawp. |
prev |
Item hmasa lam chu a cycle a. Item hmasa a lan hmain (eg, event a thlen hmain) caller hnenah a kir leh thin .slid.bs.carousel |
next |
Item dang a cycle a. Item dang a lan hmain (eg, event a thlen hmain) caller hnenah a kir leh thin .slid.bs.carousel |
nextWhenVisible |
Page hmuh theih loh emaw, carousel emaw a nu leh pa emaw hmuh theih loh hunah carousel chu next-ah cycle suh. Target item a lan hmain caller hnenah a kir leh thin |
to |
Carousel chu frame pakhatah a cycle (0 based, array ang chi). Target item a lan hmain (eg, event a thlen hmain) caller hnenah a kir leh thin .slid.bs.carousel |
dispose |
Element pakhat carousel a tichhia. (DOM element-a data dahkhawmte a paih chhuak) |
getInstance |
Static method hmanga DOM element nena inzawm carousel instance hmuh theihna tur, hetiang hian i hmang thei ang:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static method chu DOM element nena inzawm carousel instance rawn pe chhuak emaw, initialised a nih loh chuan a thar siam emaw a ni. Hetiang hian i hmang thei ang:bootstrap.Carousel.getOrCreateInstance(element) |
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 nito
: Item lo awm tur index a ni
Carousel event zawng zawng hi carousel ngeiah (ie at the <div class="carousel">
).
Event chi hrang hrang | Hrilhfiahna |
---|---|
slide.bs.carousel |
slide Instance method invoke a nih chuan a kang nghal vek . |
slid.bs.carousel |
Carousel chuan a slide transition a zawh hunah kah chhuak thin. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})