Karosel

Slide jiracogo yɔrɔ min bɛ kɛ ka cycle kɛ fɛnw kɔnɔ—jaw walima sɛbɛnniw slidew—i n’a fɔ carousel.

A bɛ baara kɛ cogo min na

Carousel ye slideshow ye min bɛ kɛ ka cycling kɛ ka tɛmɛn kɔnɔkow kan, min jɔlen bɛ ni CSS 3D transforms ye ani JavaScript dɔɔnin. A bɛ baara kɛ ni jaw, sɛbɛnniw walima taamasiyɛnw ye minnu bɛ tugu ɲɔgɔn na. A fana bɛ dɛmɛ don kɔlɔsili tɛmɛnenw/nataw la ani taamasiyɛnw na.

Navigatɛri minnu na Page Visibility API bɛ dɛmɛ, carousel bɛna a yɛrɛ tanga sɛgɛn ma ni webpage tɛ ye baarakɛla fɛ (i n’a fɔ ni navigatɛri tab tɛ baara la, navigatɛri finɛtiri bɛ dɔgɔya, a ɲɔgɔnnaw).

Aw k’a dɔn ko nested carousels tɛ dɛmɛ, wa carousels caman tɛ bɛn sɔrɔli sariyaw ma.

A laban na, n’i b’an ka JavaScript jɔ ka bɔ source la, a bɛ wajibiyautil.js .

Misaliya

Carousels tɛ slide dimensions normalize u yɛrɛma. O cogo la, i bɛ se ka baara kɛ ni nafamafɛn wɛrɛw ye walima ka baara kɛ ni cogoyaw ye minnu bɛ kɛ ka kɛɲɛ ni i yɛrɛ sago ye walasa ka kunnafoniw bonya ka bɛn. Hali ni karoselw bɛ dɛmɛ don kɔrɔlenw/nataw ni taamasiyɛnw na, u tɛ wajibiya k’a jɛya. Aw bɛ dɔ fara a kan ani ka a kɛ ka kɛɲɛ ni aw yɛrɛ sago ye.

Aw ye aw jija ka id kɛrɛnkɛrɛnnen dɔ sigi .carouselfor optional controls kan, kɛrɛnkɛrɛnnenya la n’aw bɛ baara kɛ ni carousel caman ye ɲɛ kelen kan.

Slides dɔrɔn

Nin ye carousel ye ni slides dɔrɔn de ye. A kɔlɔsi ko .d-blockani .img-fluidbɛ carousel jaw kan walasa ka browser default image alignment bali.

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Ni controles ye

Fàrali kan kɔrɔlenw ni nataw la:

Tɛmɛnen Nata

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

Ni taamasiyɛnw ye

Aw bɛ se fana ka taamasiyɛnw fara carousel kan, ka fara controls kan, olu fana.

Tɛmɛnen Nata

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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>

Ni sɛbɛnniw ye

aw bɛ sɛbɛnniw fara aw ka slayidiw kan nɔgɔya la ni .carousel-captionfɛn ye min bɛ fɛn o fɛn kɔnɔ .carousel-item. U bɛ se ka dogo nɔgɔya la filɛlikɛyɔrɔ fitininw kan, i n’a fɔ a jiralen bɛ cogo min na jukɔrɔ, ni jiracogo nafamaw ye minnu bɛ se ka sugandi . An b’u dogo a daminɛ na ni .d-nonek’u lasegin minɛn cɛmancɛw kan ni .d-md-block.

Slide label fɔlɔ

Nulla vitae elit libero, o ye furakisɛ ye min bɛ wele ko pharetra augue mollis interdum.

Slide label filanan

Lorem ipsum dolor sigilen amet, consectetur adipiscing elit.

Slide label sabanan

Praesent commodo cursus magna, min bɛ wele ko vel scelerisque nisl consectetur.

Tɛmɛnen Nata

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

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Baara kɛ ni data attributes ye walasa ka carousel jɔyɔrɔ kɔlɔsi nɔgɔya la. data-slidebɛ sɔn daɲɛ kolomaw ma prevwalima next, o min bɛ slide jɔyɔrɔ Changer ka kɛɲɛ n’a jɔyɔrɔ ye sisan. Ni o tɛ, baara kɛ ni data-slide-toka slide index raw tɛmɛ ka taa carousel data-slide-to="2", o bɛ slide jɔyɔrɔ wuli ka taa index kɛrɛnkɛrɛnnen dɔ la min bɛ daminɛ ni 0.

O data-ride="carousel"jogo bɛ Kɛ ka carousel dɔ taamaʃyɛn Kɛ i n'a fɔ animation (ɲɛnamaya) k'a Daminɛ ɲɛ doni na. A tɛ Se ka baara Kɛ ni (redundant ani unnecessary) JavaScript daminɛcogo jɛlen ye carousel kelen na.

JavaScript fɛ

Aw bɛ carousel wele ni bolo ye ni:

$('.carousel').carousel()

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-, i n’a fɔ a bɛ cogo min na data-interval="".

Fɛɛrɛw

.carousel(options)

A bɛ carousel daminɛ ni options options ye objectani ka cycle daminɛ fɛnw fɛ.

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

.carousel('cycle')

A bɛ cycle kɛ carousel fɛnw kɔnɔ ka bɔ numan fɛ ka taa kinin fɛ.

.carousel('pause')

A bɛ carousel bali ka boli ka tɛmɛ fɛnw fɛ.

.carousel(number)

A bɛ carousel cycle kɛ ka taa frame kɛrɛnkɛrɛnnen dɔ la (0 basigilen, a bɛ tali kɛ array dɔ la). A bɛ segin welebaga ma sanni laɲinifɛn ka jira (o kɔrɔ ye ko sanni ko slid.bs.carouselin ka kɛ).

.carousel('prev')

Sikiliw bɛ taa fɛn tɛmɛnen na. A bɛ segin welebaga ma sanni fɛn tɛmɛnen ka jira (o kɔrɔ ye ko sanni ko slid.bs.carouselin ka kɛ).

.carousel('next')

Sikiliw bɛ taa fɛn nata la. A bɛ segin welebaga ma sanni fɛn nata ka jira (o kɔrɔ ye ko sanni ko slid.bs.carouselin ka kɛ).

.carousel('dispose')

A bɛ element dɔ ka carousel tiɲɛ.

Ko minnu kɛra

Bootstrap ka carousel kalan bɛ ko fila jira ka ɲɛsin hooking ka carousel baarakɛcogo ma. O ko fla bɛɛ bɛ ni nin nafa wɛrɛw ye:

• direction: Karɔsi bɛ sɛgɛn sira min fɛ (o "left"walima "right").
• relatedTarget: DOM yɔrɔ min bɛ ka sɛgɛn ka don a nɔ na i n’a fɔ fɛn min bɛ baara kɛ.
• from: Fɛn min bɛ sen na sisan, o index (index) ye
• to: Fɛn nata index (index) ye

Karosel ko kɛlenw bɛɛ bɛ ci karɔsi yɛrɛ la (o kɔrɔ ye ko <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})