Carousel
Parçeyek slideshow ji bo bisiklêtan di nav hêmanan de - wêne an slaytên nivîsê - mîna karûzelê.
Çawa dixebite
Carousel ji bo bisiklêtan di nav rêzek naverokê de slideshowek e, ku bi veguherînên CSS 3D û piçek JavaScript hatî çêkirin. Ew bi rêzek wêne, nivîs, an nîşankirina xwerû re dixebite. Di heman demê de piştgirî ji bo kontrol û nîşankerên berê / paşîn jî vedigire.
Di gerokên ku API-ya Dîtina Rûpelê tê piştgirî kirin de, dema ku rûpela malperê ji bikarhênerê re xuya nebe (wek mînak dema ku tabloya gerokê neçalak be, pencereya gerokê kêm bibe, hwd.) dê ji lingê xwe dûr bikeve.
prefers-reduced-motion
medyayê ve girêdayî ye. Binêre
beşa tevgera kêmkirî ya belgeya gihîştina me .
Ji kerema xwe hay ji xwe hebin ku carousels hêlîn nayên piştgirî kirin, û carousel bi gelemperî li gorî standardên gihîştinê ne.
Mînak
Carousel bixweber pîvanên slaytê normal nakin. Ji ber vê yekê, dibe ku hûn hewce ne ku hûn karûbarên zêde an şêwazên xwerû bikar bînin da ku naveroka bi guncan mezin bikin. Dema ku carousel kontrol û nîşankerên berê / paşîn piştgirî dikin, ew bi eşkere ne hewce ne. Wekî ku hûn rast dibînin lê zêde bikin û xweş bikin.
Pêdivî ye ku .active
çîn li yek ji slaytan were zêdekirin, wekî din carousel nayê dîtin. Di heman demê de pê ewle bin ku hûn id
ji .carousel
bo kontrolên vebijarkî yektayek saz bikin, nemaze heke hûn li ser yek rûpelek pir carousel bikar tînin. Pêdivî ye ku hêmanên kontrol û nîşanker xwedan data-bs-target
taybetmendiyek (an jî href
ji bo girêdanan) be ku bi hêmanê re id
têkildar be..carousel
Slides tenê
Li vir carouselek bi tenê slaytan heye. Bala xwe bidin hebûna .d-block
û .w-100
li ser wêneyên carousel da ku pêşî li hevrêzkirina wêneya xwerû ya gerokê bigire.
<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>
Bi kontrolên
Di kontrolên berê û paşîn de zêde kirin. Em pêşniyar dikin ku <button>
hêmanan bikar bînin, lê hûn dikarin <a>
hêmanên bi 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>
Bi nîşangiran
Her weha hûn dikarin li kêleka kontrolê, nîşanan jî li karûselê zêde bikin.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
<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>
Bi sernivîsan
.carousel-caption
Bi hêmanek di nav her yekê de sernavan li slaytên xwe zêde bikin .carousel-item
. Ew dikarin bi hêsanî li ser dîmenderên piçûktir werin veşartin, wekî ku li jêr tê xuyang kirin, bi karûbarên pêşandana vebijarkî . Em wan di destpêkê de bi wan vedişêrin .d-none
û bi wan re vedigerînin ser cîhazên navîn .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<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
Li karûzela .carousel-fade
xwe zêde bikin da ku li şûna slaytê slaytan bi veguheztina fade zindî bikin. Bi naveroka xweya karûselê ve girêdayî ye (mînak, nivîs tenê slaytên), dibe ku hûn bixwazin ku ji bo xaçerêya rast .bg-body
a CSS- .carousel-item
ya xwerû li s-yê zêde bikin.
<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>
.carousel-item
Navbera takekesî
Ji data-bs-interval=""
bo .carousel-item
guherandina mêjera dema derengmayîna di navbera bisiklêtan bixweber ber bi tiştê din ve biguhezînin a-yê.
<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>
Swiping touch neçalak bike
Karûzel piştgirî didin şûştina çep/rast li ser cîhazên ekrana destikê da ku di navbera slaytan de bigerin. Ev dikare bi karanîna data-bs-touch
taybetmendiyê were asteng kirin. Mînaka li jêr di heman demê de data-bs-ride
taybetmendiyê nagire ji ber vê yekê ew bixweber nayê lîstin.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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>
Guhertoya tarî
Ji .carousel-dark
bo .carousel
kontrolên tarîtir, nîşangir û sernavê lê zêde bikin. Kontrol ji dagirtina xweya spî ya xwerû ya bi filter
taybetmendiya CSS ve hatine vegerandin. Sernav û kontrol guhêrbarên Sass ên din hene ku color
û 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>
Veguheztina Custom
Ger hûn CSS-ya berhevkirî bikar tînin, dirêjahiya veguheztinê .carousel-item
dikare bi guherbara Sass ve were guheztin berî berhevkirinê an şêwazên xwerû. $carousel-transition-duration
Ger veguheztinên pirjimar werin sepandin, pê ewle bine ku veguheztina veguherînê pêşî hatî destnîşan kirin (mînak transition: transform 2s ease, opacity .5s ease-out
).
Sass
Variables
Guherbarên ji bo hemî carousel:
$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`)
Guherbarên ji bo carousela tarî :
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Bikaranîna
Bi taybetmendiyên daneyê
Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-bs-slide
keywords prev
an jî qebûl dike next
, ku pozîsyona slideyê li gorî pozîsyona wê ya heyî diguhezîne. Alternatîf, bikar bînin data-bs-slide-to
ku navnîşek slide ya xav bi karûselê re derbas bikin data-bs-slide-to="2"
, ku pozîsyona slideyê vediguhezîne navnîşek taybetî ya ku bi dest pê dike 0
.
Taybetmendî data-bs-ride="carousel"
ji bo nîşankirina carouselek wekî anîmasyonek ku di barkirina rûpelê de dest pê dike tê bikar anîn. Ger hûn ji data-bs-ride="carousel"
bo destpêkirina carousel-a xwe bikar neynin, pêdivî ye ku hûn wê bixwe bidin destpêkirin. Ew nikare bi hevberdana bi destpêkirina JavaScriptê ya eşkere ya heman carouselê (zêde û nehewce) re were bikar anîn.
Bi JavaScript
Carousel bi destan bang bikin bi:
const carousel = new bootstrap.Carousel('#myCarousel')
Vebijêrk
Ji ber ku vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin, hûn dikarin navek vebijarkê lê zêde bikin data-bs-
, wekî di data-bs-animation="{value}"
. Dema ku vebijarkan bi taybetmendiyên daneyê re derbas bikin, pê ewle bin ku hûn celebê doza navê vebijarkê ji " camelCase " veguherînin " kebab-case ". Mînakî, data-bs-custom-class="beautifier"
li şûna bikar bînin data-bs-customClass="beautifier"
.
Ji Bootstrap 5.2.0-ê, hemî pêkhate taybetmendiyek daneya veqetandî ya ceribandinêdata-bs-config
piştgirî dikin ku dikare veavakirina hêmanek hêsan wekî rêzek JSON bihewîne. Dema ku hêmanek hebe data-bs-config='{"delay":0, "title":123}'
û data-bs-title="456"
taybetmendî hebe, nirxa paşîn title
dê bibe 456
û taybetmendiyên daneya veqetandî dê nirxên ku li ser hatine dayîn derbas bikin data-bs-config
. Digel vê yekê, taybetmendiyên daneya heyî dikarin nirxên JSON ên mîna data-bs-delay='{"show":0,"hide":150}'
.
Nav | Awa | Destçûnî | Terîf |
---|---|---|---|
interval |
jimare | 5000 |
Rêjeya dema derengmayîna di navbera bisiklêta bixweber a babetek de. |
keyboard |
boolean | true |
Ma carousel divê ji bûyerên klavyeyê re bertek nîşan bide. |
pause |
têl, belî | "hover" |
Ger "hover" bisiklêtê bisiklêtê li ser were danîn rawestîne û bisiklêta carouselê ji nû ve mouseenter dest pê bike mouseleave . Ger li ser were danîn false , hejandina li ser karûselê wê rawestîne. Li ser cîhazên pêça-çalakkirî, gava ku li ser were danîn "hover" , bisiklêtan dê touchend du navberan bisekine (dema ku bikarhêner têkiliya xwe bi karûselê re qedand) berî ku bixweber ji nû ve dest pê bike. Ev ji bilî tevgera mişkê ye. |
ride |
têl, belî | false |
Ger li ser were danîn true , piştî ku bikarhêner bi destan çîkala yekem bike carousel bixweber dileyze. Ger li ser were danîn "carousel" , carousel li ser barkirinê bixweber dileyze. |
touch |
boolean | true |
Ma divê karûzel li ser cîhazên dîmendera destikê piştgirî bide danûstendinên swipe çepê/rastê. |
wrap |
boolean | true |
Ger carousel bi domdarî bizivire an rawestgehên dijwar hebin. |
Methods
Rêbaz û veguherînên Asynchronous
Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.
Hûn dikarin bi çêkerê karûzelê re mînakek karûselê biafirînin, mînakî, ji bo destpêkirina vebijarkên zêde û dest bi ajotina bi hêmanan bikin:
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
wrap: false
})
Awa | Terîf |
---|---|
cycle |
Ji çepê ber bi rastê ve di nav tiştên karûselê re digere. |
dispose |
Karûza hêmanek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike) |
getInstance |
Rêbaza statîk ku dihêle hûn mînaka karûzelê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, hûn dikarin wiya bi vî rengî bikar bînin: bootstrap.Carousel.getInstance(element) . |
getOrCreateInstance |
Rêbaza statîk a ku mînakek karûzelê ya ku bi hêmanek DOM-ê ve girêdayî ye vedigerîne an heke ew nehatibe destpêkirin yek nû diafirîne. Hûn dikarin wê bi vî rengî bikar bînin bootstrap.Carousel.getOrCreateInstance(element) :. |
next |
Dûv re ber bi babeta din ve diçe. Berî ku tiştê din were xuyang kirin (mînak, berî ku slid.bs.carousel bûyer çêbibe) vedigere bangewazî. |
nextWhenVisible |
Dema ku rûpel neyê dîtin an jî gerîdok an dêûbavê wê neyê dîtin, carouselê neçin pêş. Berî ku tişta mebest were xuyang kirin vedigere bangewazî . |
pause |
Karûselê ji bisiklêtan di nav tiştan re rawestîne. |
prev |
Dûv re berbi babeta berê ve diçe. Berî ku tişta berê were nîşandan (mînak, berî ku slid.bs.carousel bûyer çêbibe) vedigere bangewazî. |
to |
Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne. Berî ku tişta mebest were nîşandan (mînak, berî ku slid.bs.carousel bûyer çêbibe) vedigere bangewazî. |
Events
Dersa karûselê ya Bootstrap du bûyeran ji bo girêdana fonksiyona karûselê eşkere dike. Her du bûyer xwedî taybetmendiyên din ên jêrîn in:
direction
: Arasteya ku carousel tê de dizivire (yan yan"left"
jî"right"
).relatedTarget
: Hêmana DOM-ê ya ku wekî hêmanek çalak di cîhê xwe de tê hilanîn.from
: Indeksa madeya heyîto
: Indeksa madeya paşîn
Hemû bûyerên carousel li carousel bi xwe (ango li <div class="carousel">
).
Cureyê bûyerê | Terîf |
---|---|
slid.bs.carousel |
Dema ku carousel veguheztina xwe ya slaytê qediya, tê şewitandin. |
slide.bs.carousel |
slide Dema ku rêbaza nimûneyê tête gazî kirin tavilê dişewite. |
const myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', event => {
// do something...
})