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.

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. .carouselDi heman demê de ji bo kontrolên vebijarkî, bi taybetî heke hûn li ser yek rûpelek pir carousel bikar tînin, pê ewle bin ku li ser navnîşek yekta destnîşan bikin . Pêdivî ye ku hêmanên kontrol û nîşanker xwedî data-targettaybetmendiyek (an jî hrefji bo girêdanan) bin ku bi nasnameya .carouselhêmanê re têkildar be.

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Bi kontrolên

Di kontrolên berê û paşîn de zêde kirin:

Pêşî Piştî

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Bi nîşangiran

Her weha hûn dikarin li kêleka kontrolê, nîşanan jî li karûselê zêde bikin.

Pêşî Piştî

<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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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

Nulla vitae elit libero, a pharetra augue mollis interdum.

Labelê slide duyemîn

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Labelê slide sêyem

Pêşkêşiya commodo cursus magna, vel scelerisque nisl consectetur.

Pêşî Piştî

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Crossfade

Li karûzela .carousel-fadexwe zêde bikin da ku li şûna slaytê slaytan bi veguheztina fade zindî bikin.

Pêşî Piştî

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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. 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="".

Methods

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

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

$('#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).