Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

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.

Nin ɲɛ in kan

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

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

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

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.

Kalanso .activeka kan ka fara slide dɔ kan n’o tɛ carousel tɛna ye. Aw ye aw jija fana ka fɛn kɛrɛnkɛrɛnnen dɔ sigi sen idkan .carouselfor optionnels controls, kɛrɛnkɛrɛnnenya la n’aw bɛ baara kɛ ni carousel caman ye ɲɛ kelen kan. Kontrɔli ni jiralan fɛnw ka kan ka kɛ ni fɛn dɔ data-bs-targetye (walima hrefka ɲɛsin ɲɔgɔndanw ma) min bɛ bɛn fɛn idin ta .carouselma.

Slides dɔrɔn

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

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

Ni controles ye

Fàrali kan kɔrɔlenw ni nataw la. An bɛ ladilikan di ka baara kɛ ni <button>fɛnw ye, nka aw bɛ se ka baara kɛ ni <a>fɛnw ye fana ni 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>

Ni taamasiyɛnw ye

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

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

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.

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

Aw bɛ fara .carousel-fadeaw ka carousel kan walasa ka slidew ɲɛnamaya ni fade transition ye slide nɔ na.

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

A bɛ fara a kan data-bs-interval=""walasa .carousel-itemka waati hakɛ Changer ka waati latɛmɛ otomatiki bisikili ni fɛn nata cɛ.

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

Aw bɛ maga-maga-sɛgɛsɛgɛli bali

Carousels bɛ dɛmɛ don ka swiping kinin fɛ/numan fɛ touchscreen minɛnw kan walasa ka taa slidew ni ɲɔgɔn cɛ. O bɛ se ka bali ni data-bs-touchfɛnsɛbɛnni ye. Misali min bɛ duguma o fana tɛ data-bs-rideattribut (fɛnɲɛnɛma) Dòn a la wa a bɛ yen data-bs-interval="false"o la a tɛ autoplay (autoplay) Kɛ.

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

Variante dibi

Aw bɛ fara a kan .carousel-darkwalasa ka .carouselkunnafoni dibimanw sɔrɔ, taamasiyɛnw, ani sɛbɛnniw. Kɔlɔsiliw inversé ka Bɔ u ka default white fill la ni filterCSS property ye. Captions ani controls bɛ ni Sass variables wɛrɛw ye minnu bɛ colorani background-color.

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

Laadalata jiginni

Tɛmɛsira waati bɛ .carousel-itemse ka Changé ni $carousel-transition-durationSass variable ye ka sɔrɔ ka compiling walima custom styles kɛ ni i bɛ baara kɛ ni compilé CSS ye. Ni bεnkan caman bε Kε, i k’a lajɛ ni bεnkansεbεn bε ɲɛfɔ fɔlɔ (misali la transition: transform 2s ease, opacity .5s ease-out).

Sass ye

Yɛlɛma-yɛlɛmaw

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

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-bs-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-bs-slide-toka slide index raw tɛmɛ ka taa carousel data-bs-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-bs-ride="carousel"jogo bɛ Kɛ ka carousel dɔ taamaʃyɛn Kɛ i n'a fɔ animation (ɲɛnamaya) k'a Daminɛ ɲɛ doni na. N'i ma baara Kɛ data-bs-ride="carousel"k'i ka carousel daminɛ, i yɛrɛ ka kan k'a daminɛ. 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:

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

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-bs-, i n’a fɔ a bɛ cogo min na data-bs-interval="".

Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
interval nimɔrɔ 5000 Waati hakɛ min ka kan ka bila kɔfɛ fɛn dɔ bolicogo otomatiki la. Ni false, carousel tɛna cycle kɛ a yɛrɛma.
keyboard boolean ye true Ni carousel ka kan ka jaabi di klaviyeti ko kɛlenw ma.
pause juru | boolean ye 'hover'

ni a bilalen don 'hover', a bɛ karɔsi ka cycle jɔli jɔ ani ka carousel mouseenterka cycle boli daminɛ kokura mouseleave. Ni a bilalen bɛ false, ka i yɛrɛ wuli karɔsi kan, o tɛna a jɔ.

Minɛn minnu bɛ se ka maga, n’u bilalen bɛ 'hover', wotoro bɛ jɔ touchend(ni baarakɛla ye jɛɲɔgɔnya kɛ ni karɔsi ye ka ban) waati fila kɔnɔ, sanni a ka segin a yɛrɛma. A kɔlɔsi ko nin bɛ fara sosɛti kɛcogo kan min fɔra sanfɛ.
ride juru | boolean ye false A bɛ carousel fɔ a yɛrɛma baarakɛla ka fɛn fɔlɔ cycle kɔfɛ a bolo fɛ. Ni a bilalen bɛ 'carousel', a bɛ carousel autoplay kɛ doni kan.
wrap boolean ye true Ni carousel ka kan ka to ka cycle kɛ walima ka jɔyɔrɔ gɛlɛnw sɔrɔ.
touch boolean ye true Ni carousel ka kan ka dɛmɛ don kininbolo/numanbolo fɛ swipe interactions kan touchscreen minɛnw kan.

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

Aw bɛ se ka karɔsi misali dɔ Dabɔ ni karɔsili dilanbaga ye, misali la, ka daminɛ ni sugandi wɛrɛw ye ani ka bisikili daminɛ fɛnw fɛ:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})
Kɛcogo Cogojirali
cycle A bɛ cycle kɛ carousel fɛnw kɔnɔ ka bɔ numan fɛ ka taa kinin fɛ.
pause A bɛ carousel bali ka boli ka tɛmɛ fɛnw fɛ.
prev Sikiliw bɛ taa fɛn tɛmɛnen na. A bɛ segin welebaga ma sanni fɛn tɛmɛnen ka jira (misali la, sanni ko slid.bs.carouselkɛlen ka kɛ).
next Sikiliw bɛ taa fɛn nata la. A bɛ segin welebaga ma sanni fɛn nata ka jira (misali la, sanni ko slid.bs.carouselkɛlen ka kɛ).
nextWhenVisible Aw kana carousel cycle kɛ ka taa next ni ɲɛ tɛ ye walima carousel walima a bangebaga tɛ ye. A bɛ segin welebaga ma sanni a laɲinifɛn ka jira
to 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 (misali la, sanni ko slid.bs.carouselkɛlen ka kɛ).
dispose A bɛ element dɔ ka carousel tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
getInstance Fɛɛrɛ jɔlen min b’a To i bɛ se ka carousel instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, i bɛ Se ka baara Kɛ n’a ye nin cogo in na:bootstrap.Carousel.getInstance(element)
getOrCreateInstance Static method min bɛ carousel instance segin min bɛ tali kɛ DOM element dɔ la walima ka kura da ni a ma daminɛ. Aw bɛ se ka baara kɛ n’a ye nin cogo la:bootstrap.Carousel.getOrCreateInstance(element)

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

Ko kɛlen suguya Cogojirali
slide.bs.carousel A bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni slidemisali fɛɛrɛ in Weele.
slid.bs.carousel A bɛ tasuma don ni carousel ye a ka slide transition dafa. 
var myCarousel = document.getElementById('myCarousel')

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