Source

Carrousel ya kosala

Eteni ya kolakisa diaporama mpo na kotambola na velo na kati ya biloko —bililingi to diapositive ya makomi —lokola carrousel.

Ndenge oyo esalaka

Carrousel ezali diaporama mpo na kosala cyclisme na nzela ya série ya contenus, etongami na ba transformations CSS 3D mpe mwa JavaScript. Esalaka na molɔngɔ́ ya bililingi, makomi, to bilembo oyo esalemi na kolanda bamposa ya moto. Ezali pe na lisungi ya ba contrôles ya kala/ya sima pe ba indicateurs.

Na ba navigateurs esika API ya Visibilité ya Lokasa esungami, carrousel ekoboya ko glisser tango page web ezali komonana te na mosaleli (lokola tango onglet ya navigateur ezali inactif, fenêtre ya navigateur ezali minimisé, etc.).

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Svp yeba ete ba carrousels encastrés esungami te, mpe ba carrousels ezali généralement na boyokani te na ba normes ya accessibilité.

Na nsuka, soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .

Ndakisa

Ba carousels e normaliser automatiquement ba dimensions ya diapositive te. Lokola ezali bongo, ekoki kozala ete osengeli kosalela ba utilitaires mosusu to ba styles personnalisés mpo na kopesa bonene ya makambo oyo ebongi. Alors que ba carrousels ezo soutenir ba contrôles ya kala/ya sima pe ba indicateurs, esengeli te explicitement. Bakisa mpe salá yango ndenge omoni ete ebongi.

Esengeli .activekobakisa kelasi na moko ya ba diapositives soki te carousel ekozala komonana te. Lisusu sala makasi otia id unique na .carouselpona ba contrôles optionnels, surtout soki ozali kosalela ba carrousels ebele na page moko. Ba éléments ya contrôle na indicateur esengeli ezala na data-targetattribut (to hrefpona ba liens) oyo ekokani na id ya .carouselélément.

Ba diapositives kaka

Tala carousel na ba diapositives kaka. Yeba présence ya .d-blockmpe .w-100na ba images ya carrousel mpo na kopekisa alignment ya image par défaut ya navigateur.

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

Na ba contrôles

Kobakisa na ba contrôles ya liboso mpe oyo elandi:

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

Na ba indicateurs

Okoki pe kobakisa ba indicateurs na carrousel, pembeni ya ba contrôles, pe.

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

Na ba captions

Bakisa ba captions na ba diapositives na yo facilement na .carousel-captionélément na kati ya nionso .carousel-item. Bakoki kobomba yango kozanga mpasi na bisika ya kotala ya mikemike, ndenge emonisami awa na nse, na ba utilitaires ya kolakisa oyo okoki kopona . Tobombaka bango na ebandeli na .d-nonempe tozongisaka yango na baaparɛyi ya monene na .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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Crossfade ya kosala

Bakisa .carousel-fadena carousel na yo pona ko animer ba diapositives na transition ya fade au lieu ya diapositive.

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

Bakisa data-interval=""na a .carousel-itemmpo na kobongola ntango ya kozongisa nsima kati na kokende na velo na ndenge ya automatique na eloko oyo elandi.

<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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Kosalela yango

Na nzela ya ba attributs ya ba données

Salelá ba attributs ya ba données mpo na ko contrôler facilement position ya carrousel. data-slideendimaka maloba ya ntina prevto next, oyo ebongoli esika ya diapositive na kotalela esika oyo ezali sikoyo. Na lolenge mosusu, salelá data-slide-tompo na koleka index ya diapositive brut na carousel data-slide-to="2", oyo ebongoli esika ya diapositive na index moko boye oyo ebandi na 0.

Attribut data-ride="carousel"esalelamaka mpo na kotya elembo na carousel lokola animateur kobanda na chargement ya lokasa. Soki osalelaka te data-ride="carousel"pona ko initialiser carrousel nayo, il faut o initialiser yango yo moko. Ekoki kosalelama te elongo na (redundante mpe oyo ezali na ntina te) initialisation ya JavaScript ya polele ya carousel moko.

Na nzela ya JavaScript

Benga carousel na maboko na:

$('.carousel').carousel()

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-interval="".

Nkombo Lolenge Mbeba Ndimbola
intervalle ya kosala nimero 5000 ya bato Motango ya ntango oyo esengeli kozongisa nsima kati na kotambola na velo na eloko moko na ndenge ya automatique. Soki lokuta, carrousel ekosala cycle automatiquement te.
clavier ya kosala boolean ya solo Soki carousel esengeli e réagir na ba événements ya clavier.
kopema molongo ya molongo | boolean "kosala hover".

Soki otie yango na "hover", ezo pause na cycle ya carrousel na mouseenterpe ezongelaka cycle ya carousel na mouseleave. Soki otye yango na false, kopumbwa likoló ya carousel ekopemisa yango te.

Na ba appareils oyo ekoki ko toucher, soki otie yango na "hover", cyclisme ekozala pause na touchend(ntango mosaleli asili kosala interaction na carousel) na boumeli ya ba intervalles mibale, liboso ya kozongela automatiquement. Yeba ete yango ezali en plus ya comportement ya souris oyo ezali likolo.
kotambola shene lokuta Ezo jouer automatiquement carrusel sima ya usager ko cycler manuellement eloko ya liboso. Soki "carousel", autoplays carrusel na charge.
kokanga boolean ya solo Ezala carrousel esengeli kosala cycle continuellement to kozala na ba arrêts ya makasi.
kosimba boolean ya solo Soki carrousel esengeli ko soutenir ba interactions ya swipe gauche/droite na ba appareils ya écran tactile.

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

.carousel(options)

Initialiser carrousel na options optionnelles objectmpe abandi ko cycler na nzela ya biloko.

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

.carousel('cycle')

Ezali kosala cycle na kati ya biloko ya carrousel kobanda na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali.

.carousel('pause')

Epekisaka carrousel ekende na velo na nzela ya biloko.

.carousel(number)

Ezali kosala cycle ya carousel na cadre moko boye (0 basé, ndenge moko na array). Ezongi na mobengi yambo eloko oyo olingi elakisama (elingi koloba liboso ete slid.bs.carousellikambo esalema).

.carousel('prev')

Ba cycles na eloko oyo eleki. Ezongi na mobengi yambo eloko ya liboso elakisami (elingi koloba liboso ete slid.bs.carousellikambo esalema).

.carousel('next')

Ezali kosala ba cycles tii na eloko oyo elandi. Ezongi na mobengi yambo eloko oyo elandi elakisami (elingi koloba liboso ete slid.bs.carousellikambo esalema).

.carousel('dispose')

Ebebisaka carrousel ya élément moko.

Makambo oyo esalemaki

Classe ya carrousel ya Bootstrap e exposer deux événements pona ko crochet na fonctionnalité ya carrousel. Ba événements nionso mibale ezali na ba propriétés ya kobakisa oyo elandi:

  • direction: Nzela oyo carrousel ezali kogumbama (soit "left"to "right").
  • relatedTarget: Elemento ya DOM oyo ezali ko glisser na esika lokola eloko ya active.
  • from: Index ya eloko oyo ezali sikoyo
  • to: Index ya eloko oyo elandi

Ba événements nionso ya carrousel ebetamaka na carrousel yango moko (c.a.d. na <div class="carousel">).

Lolenge ya likambo Ndimbola
diapositive.bs.carousel ya kosala Evenement oyo ezo beta mbala moko tango slideméthode ya instance ezo invoquer.
glissement.bs.carousel ya kosala Evenement oyo ebetamaka tango carrousel esili kosala transition na yango ya diapositive. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Bobongola ntango ya mbongwana

Durée ya transition ya .carousel-itemekoki ko changer na $carousel-transitionvariable Sass avant ya compilation to ba styles personnalisés soki ozali kosalela CSS compilé. Soki ba transitions ebele esalelami, sala que transition ya transformation e définir liboso (ndakisa transition: transform 2s ease, opacity .5s ease-out).