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.

Di dawiyê de, heke hûn JavaScript-a me ji çavkaniyê ava dikin, ew hewce dikeutil.js .

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-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-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-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-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-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 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-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Ji data-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-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">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-touchtaybetmendiyê were asteng kirin. Mînaka jêrîn di heman demê de data-ridetaybetmendiyê nagire û ji data-interval="false"ber vê yekê ew bixweber nayê lîstin.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-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-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Bikaranîna

Bi taybetmendiyên daneyê

Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-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-slide-toku navnîşek slide ya xav bi karûselê re derbas bikin data-slide-to="2", ku pozîsyona slideyê vediguhezîne navnîşek taybetî ya ku bi dest pê dike 0.

Taybetmendî data-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-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:

$('.carousel').carousel()

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-, wekî di data-interval="".

Nav Awa Destçûnî Terîf
navber jimare 5000 Rêjeya dema derengmayîna di navbera bisiklêta bixweber a babetek de. Ger false, carousel dê bixweber nekeve.
kilawye boolean rast Ma carousel divê ji bûyerên klavyeyê re bertek nîşan bide.
mizdan string | boolean 'livîn'

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. Bala xwe bidinê ku ev ji bilî tevgera mişkê ya jorîn e.
rêwîtî ben şaş 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.
pêçan boolean rast Ger carousel bi domdarî bizivire an rawestgehên dijwar hebin.
pêbûn boolean rast 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 .

.carousel(options)

Karûselê bi vebijarkek vebijarkî objectdest pê dike û di nav tiştan de bisiklêtê dest pê dike.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.

.carousel('pause')

Karûselê ji bisiklêtan di nav tiştan re rawestîne.

.carousel(number)

Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne. Berî ku tişta mebest were nîşandan (ango berî ku slid.bs.carouselbûyer çêbibe) vedigere bangewazî.

.carousel('prev')

Dûv re berbi babeta berê ve diçe. Berî ku tişta berê were nîşandan (ango berî ku slid.bs.carouselbûyer çêbibe) vedigere bangewazî.

.carousel('next')

Dûv re ber bi babeta din ve diçe. Berî ku tişta din were xuyang kirin (ango berî ku slid.bs.carouselbûyer çêbibe) vedigere bangewazî.

.carousel('dispose')

Karûza hêmanek hilweşîne.

.carousel('nextWhenVisible')

Dema ku rûpel nexuyane an gerîdok an dêûbavê wê xuya nebe, carouselê neçin pêş. Berî ku tişta din were xuyang kirin (ango berî ku slid.bs.carouselbûyer çêbibe) vedigere bangewazî.

.carousel('to')

Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne. Berî ku tişta din were xuyang kirin (ango 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"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 slideDema ku rêbaza nimûneyê tê xwestin ev bûyer tavilê dişewite.
slid.bs.carousel Dema ku carousel veguherîna xwe ya slaytê qedand ev bûyer tê şewitandin. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Demjimêra veguherînê biguherînin

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-transitionGer 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).