Biçe ser naveroka sereke Biçe navîgasyon belgeyan
Check
in English

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.

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê 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 idji .carouselbo 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-targettaybetmendiyek (an jî hrefji bo girêdanan) be ku bi hêmanê re idtêkildar be..carousel

Slides tenê

Li vir carouselek bi tenê slaytan heye. Bala xwe bidin hebûna .d-blockû .w-100li ser wêneyên carousel da ku pêşî li hevrêzkirina wêneya xwerû ya gerokê bigire.

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

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

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

html
<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-fadexwe 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-bodya CSS- .carousel-itemya xwerû li s-yê zêde bikin.

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

Ji data-bs-interval=""bo .carousel-itemguherandina mêjera dema derengmayîna di navbera bisiklêtan bixweber ber bi tiştê din ve biguhezînin a-yê.

html
<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-touchtaybetmendiyê were asteng kirin. Mînaka li jêr di heman demê de data-bs-ridetaybetmendiyê nagire ji ber vê yekê ew bixweber nayê lîstin.

html
<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-darkbo .carouselkontrolên tarîtir, nîşangir û sernavê lê zêde bikin. Kontrol ji dagirtina xweya spî ya xwerû ya bi filtertaybetmendiya CSS ve hatine vegerandin. Sernav û kontrol guhêrbarên Sass ên din hene ku colorû background-color.

html
<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-itemdikare bi guherbara Sass ve were guheztin berî berhevkirinê an şêwazên xwerû. $carousel-transition-durationGer 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-slidekeywords prevan 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-toku 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 titledê 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 mouseenterdest 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ê touchenddu 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.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

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.carouselbû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.carouselbû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.carouselbû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""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 slideDema 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...
})