Mandehana any amin'ny votoaty fototra Mandehana any amin'ny docs navigation
Check
in English

Carousel

Singa sary mihetsika ho an'ny mandeha bisikileta amin'ny singa — sary na horonan-tsary — toy ny carousel.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Ny carousel dia sary mihetsika ho an'ny bisikileta amin'ny alàlan'ny votoaty maromaro, namboarina miaraka amin'ny fanovana CSS 3D sy JavaScript kely. Izy io dia miasa miaraka amin'ny andian-tsary, lahatsoratra, na marika manokana. Tafiditra ao anatin'izany koa ny fanohanana ireo fanaraha-maso sy tondro teo aloha/manaraka.

Ao amin'ny mpitety izay manohana ny Page Visibility API , ny carousel dia tsy hivezivezy rehefa tsy hitan'ny mpampiasa ny pejin-tranonkala (toy ny rehefa tsy miasa ny tabilao navigateur, mihena ny varavarankelin'ny navigateur, sns.).

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

Azafady, tandremo fa tsy tohanana ny carousels misy akany, ary tsy mifanaraka amin'ny fenitry ny fidirana amin'ny ankapobeny ny carousels.

OHATRA

Ny carousels dia tsy manara-penitra ho azy ny refin'ny slide. Noho izany, mety mila mampiasa fitaovana fanampiny na fomba fanao mahazatra ianao mba hamehezana ny atiny. Na dia manohana ny fanaraha-maso sy ny tondro teo aloha/manaraka aza ny carousels, dia tsy takiana mazava. Ampio sy amboary araka izay hitanao fa mety.

Ny .activekilasy dia mila ampiana amin'ny iray amin'ireo slides raha tsy izany dia tsy ho hita ny carousel. Aza hadino ihany koa ny mametraka tsy manam-paharoa idamin'ny .carouselfanaraha-maso azo atao, indrindra raha mampiasa carousels maromaro amin'ny pejy tokana ianao. Ny singa fanaraha-maso sy famantarana dia tsy maintsy manana data-bs-targettoetra (na hrefho an'ny rohy) mifanaraka idamin'ny .carouselsinga.

Slides ihany

Ity misy carousel misy slide ihany. Mariho ny fisian'ny sary carousel .d-blocksy .w-100amin'ny carousel mba hisorohana ny fampifanarahana ny sary default amin'ny navigateur.

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

Miaraka amin'ny fanaraha-maso

Manampy amin'ny fanaraha-maso teo aloha sy manaraka. Manoro hevitra izahay hampiasa <button>singa, fa afaka mampiasa <a>singa miaraka amin'ny role="button".

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

Miaraka amin'ny famantarana

Azonao atao koa ny manampy ny tondro amin'ny carousel, miaraka amin'ny fanaraha-maso ihany koa.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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>

Miaraka amin'ny lohateny

Ampio caption amin'ny slide-nao mora foana miaraka amin'ny .carousel-captionsinga ao anatin'ny .carousel-item. Azo afenina mora foana amin'ny seranana kely kokoa izy ireo, araka ny aseho etsy ambany, miaraka amin'ny fitaovana fampirantiana azo atao . Afeninay amin'ny voalohany izy ireo .d-noneary averinay amin'ny fitaovana antonony miaraka amin'ny .d-md-block.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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

Ampio .carousel-fadeao amin'ny carousel-nao mba hampihetsi-po ny slides miaraka amin'ny fifindrana manjavona fa tsy slide. Miankina amin'ny atiny carousel-nao (ohatra, sary mihetsika fotsiny) dia azonao atao ny manampy .bg-bodyna CSS mahazatra amin'ny .carousel-items ho an'ny crossfading mety.

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

Ampio data-bs-interval=""ny a .carousel-itemhanovana ny fotoana hanemorana eo anelanelan'ny fandehanana mandeha ho azy mankany amin'ny singa manaraka.

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

Atsaharo ny fikapohana mikasika

Ny carousels dia manohana ny fikosehana miankavia / miankavanana amin'ny fitaovana efijery kitihina mba hivezivezena eo anelanelan'ny sary. Izany dia mety ho kilemaina amin'ny fampiasana ny data-bs-touchtoetra. Ny ohatra etsy ambany koa dia tsy ahitana ny data-bs-ridetoetra ka tsy mandeha ho azy.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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>

Variant maizina

Ampio .carousel-darkao amin'ny .carouselho an'ny fanaraha-maso maizina, tondro ary lohateny. Ny fanaraha-maso dia navadika avy amin'ny famenoana fotsy mahazatra miaraka amin'ny filterfananana CSS. Ny dikan-teny sy ny fanaraha-maso dia manana fari-pahalalana Sass fanampiny izay mampifanaraka ny colorsy background-color.

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

Tetezamita manokana

Ny faharetan'ny tetezamita .carousel-itemdia azo ovaina miaraka amin'ny $carousel-transition-durationfari-piadidiana Sass alohan'ny hanangonana na fomba fanao mahazatra raha mampiasa ny CSS natambatra ianao. Raha tetezana maromaro no ampiharina, ataovy azo antoka fa voafaritra aloha ny fiovan'ny fiovana (oh transition: transform 2s ease, opacity .5s ease-out).

Sass

hiovaova

Variables ho an'ny carousels rehetra:

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

Variables ho an'ny carousel maizina :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Fampiasana

Amin'ny alàlan'ny data attributes

Mampiasà toetra angona mba hifehezana mora foana ny toerana misy ny carousel. data-bs-slidemanaiky ny teny fanalahidy prevna next, izay manova ny toeran'ny slide mifandraika amin'ny toerana misy azy ankehitriny. Raha tsy izany, ampiasao data-bs-slide-tony fampitaovana fanondroana misesy manta mankany amin'ny carousel data-bs-slide-to="2", izay mamindra ny toeran'ny kisendrasendra mankany amina fanondroana manokana manomboka amin'ny 0.

Ny data-bs-ride="carousel"toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Raha tsy mampiasa data-bs-ride="carousel"ny carousel ianao, dia tsy maintsy ataonao voalohany izany. Tsy azo ampiasaina miaraka amin'ny fanombohana JavaScript mibaribary (mihemotra sy tsy ilaina) amin'ny carousel mitovy.

Amin'ny JavaScript

Antsoy amin'ny tanana ny carousel amin'ny:

const carousel = new bootstrap.Carousel('#myCarousel')

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Anarana Type toerana misy anao Description
interval isa 5000 Ny faharetan'ny fotoana eo anelanelan'ny fandehanana mandeha ho azy amin'ny zavatra iray.
keyboard boolean true Na tokony hihetsika amin'ny hetsika fitendry ny carousel.
pause string, booleana "hover" Raha apetraka amin'ny "hover", atsaharo ny fihodinan'ny carousel mouseenterary avereno indray ny fihodinan'ny carousel amin'ny mouseleave. Raha apetraka amin'ny false, dia tsy hampiato azy ny fikopaka eo ambonin'ny carousel. Amin'ny fitaovana azo fikasihana, rehefa apetraka amin'ny "hover", dia hiato kely ny bisikileta touchend(rehefa vita ny fifandraisan'ny mpampiasa amin'ny carousel) mandritra ny elanelam-potoana roa, alohan'ny hamerenana ho azy. Izany dia ankoatra ny fitondran-tenan'ny totozy.
ride string, booleana false Raha apetraka amin'ny true, dia alefa mandeha ho azy ny carousel aorian'ny fanodinan'ny mpampiasa ny singa voalohany. Raha apetraka amin'ny "carousel", dia alefa mandeha ho azy ny carousel amin'ny entana.
touch boolean true Na ny carousel dia tokony hanohana ny fifampikasohana miankavia/ankavanana amin'ny fitaovana ecran touchy.
wrap boolean true Na tokony hivezivezy tsy tapaka ny carousel na hisy fiatoana mafy.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

Azonao atao ny mamorona ohatra amin'ny carousel miaraka amin'ny mpanamboatra carousel, ohatra, hanombohana amin'ny safidy fanampiny ary manomboka mandehandeha amin'ny zavatra:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
FOMBA Description
cycle Mihodikodina amin'ireo singa carousel miankavia miankavanana.
dispose Manimba ny carousel an'ny singa iray. (Esory ny angona voatahiry amin'ny singa DOM)
getInstance Fomba static izay ahafahanao mahazo ny ohatra carousel mifandray amin'ny singa DOM, azonao ampiasaina toy izao: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Fomba static izay mamerina ohatra carousel mifandray amin'ny singa DOM na mamorona vaovao raha toa ka tsy natomboka izany. Azonao ampiasaina toy izao: bootstrap.Carousel.getOrCreateInstance(element).
next Mihodina mankany amin'ny singa manaraka. Miverina amin'ny mpiantso alohan'ny hisehoan'ny singa manaraka (oh: alohan'ny slid.bs.carouselnitrangan'ny hetsika).
nextWhenVisible Aza mivezivezy amin'ny carousel manaraka rehefa tsy hita ny pejy na tsy hita ny carousel na ny ray aman-dreniny. Miverina amin'ny mpiantso alohan'ny hisehoan'ny zavatra kendrena .
pause Manakana ny carousel tsy hivezivezy amin'ny entana.
prev Mihodina mankany amin'ny singa teo aloha. Miverina any amin'ny mpiantso alohan'ny hisehoan'ilay singa teo aloha (oh: alohan'ny slid.bs.carouselnitrangan'ny hetsika).
to Mihodina ny carousel mankany amin'ny frame manokana (mifototra amin'ny 0, mitovy amin'ny array). Miverina any amin'ny mpiantso alohan'ny hisehoan'ny zavatra kendrena (oh: alohan'ny slid.bs.carouselnitrangan'ny hetsika).

zava-mitranga

Ny kilasin'ny carousel an'ny Bootstrap dia mampiseho fisehoan-javatra roa ho an'ny fampidiran-dresaka amin'ny fiasa carousel. Samy manana ireto toetra fanampiny ireto ny hetsika roa:

  • direction: Lalana mikoriana ny carousel (na "left"na "right").
  • relatedTarget: Ny singa DOM izay apetraka amin'ny toerany ho singa mavitrika.
  • from: Fanondroan'ny zavatra ankehitriny
  • to: Tondron'ny zavatra manaraka

Ny hetsika carousel rehetra dia alefa amin'ny carousel mihitsy (izany hoe ao amin'ny <div class="carousel">).

Karazana hetsika Description
slid.bs.carousel Voaroaka rehefa nahavita ny fifindran'ny diany ny carousel.
slide.bs.carousel Mirehitra avy hatrany rehefa ampiasaina ny slidefomba ohatra. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})