Carousel

Parçeyek slideshow ji bo bisiklêtan di nav hêmanan de - wêne an slaytên nivîsê - mîna karûzelê.

Li ser vê rûpelê

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

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

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.

Labelê slide yekem

Ji bo slideya yekem hin naveroka cîhê nûnerê nûner.

Labelê slide duyemîn

Hin naveroka cîhê nûnerê ji bo slideya duyemîn.

Labelê slide sêyem

Hin naveroka cîhê nûnerê ji bo slide sêyemîn.

<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

Li karûzela .carousel-fadexwe zêde bikin da ku li şûna slaytê slaytan bi veguheztina fade zindî 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-itemguherandina 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-touchtaybetmendiyê were asteng kirin. Mînaka jêrîn di heman demê de data-bs-ridetaybetmendiyê nagire û ji data-bs-interval="false"ber vê yekê ew bixweber nayê lîstin.

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

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.

Labelê slide yekem

Ji bo slideya yekem hin naveroka cîhê nûnerê nûner.

Labelê slide duyemîn

Hin naveroka cîhê nûnerê ji bo slideya duyemîn.

Labelê slide sêyem

Hin naveroka cîhê nûnerê ji bo slide sêyemîn.

<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 veguheztinê pêşî tête diyar kirin (mînak. transition: transform 2s ease, opacity .5s ease-out).

Sass

Variables

$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);

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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-interval="".

Nav	Awa	Destçûnî	Terîf
`interval`	jimare	`5000`	Rêjeya dema derengmayîna di navbera bisiklêta bixweber a babetek de. Ger `false`, carousel dê bixweber nekeve.
`keyboard`	boolean	`true`	Ma carousel divê ji bûyerên klavyeyê re bertek nîşan bide.
`pause`	string \| boolean	`'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. Bala xwe bidinê ku ev ji bilî tevgera mişkê ya jorîn e.
`ride`	string \| boolean	`false`	Piştî ku bikarhêner bi destan tiştê yekem bizivirîne carouselê bixweber dileyze. Ger li ser were danîn `'carousel'`, carousel li ser barkirinê bixweber dileyze.
`wrap`	boolean	`true`	Ger carousel bi domdarî bizivire an rawestgehên dijwar hebin.
`touch`	boolean	`true`	Ma divê karûzel li ser cîhazên dîmendera destikê piştgirî bide danûstendinên swipe çepê/rastê.

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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Awa	Terîf
`cycle`	Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.
`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î.
`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ştê mebest were xuyang kirin vedigere bangker
`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î.
`dispose`	Karûza hêmanek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)
`getInstance`	Rêbaza statîkî ya ku dihêle hûn mînaka karûzelê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, hûn dikarin wê 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)`

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
`slide.bs.carousel`	`slide`Dema ku rêbaza nimûneyê tête gazî kirin tavilê dişewite.
`slid.bs.carousel`	Dema ku carousel veguheztina xwe ya slaytê qediya, tê şewitandin.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Carousel

Çawa dixebite

Mînak

Slides tenê

Bi kontrolên

Bi nîşangiran

Bi sernivîsan

Labelê slide yekem

Labelê slide duyemîn

Labelê slide sêyem

Crossfade

.carousel-itemNavbera takekesî

Swiping touch neçalak bike

Guhertoya tarî

Labelê slide yekem

Labelê slide duyemîn

Labelê slide sêyem

Veguheztina Custom

Sass

Variables

Bikaranîna

Bi taybetmendiyên daneyê

Bi JavaScript

Vebijêrk

Methods

Rêbaz û veguherînên Asynchronous

Events

`.carousel-item`Navbera takekesî