Source

Carousel

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

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.

Farany, raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .

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. Ataovy azo antoka ihany koa ny mametraka id tokana amin'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-targettoetra (na hrefho an'ny rohy) mifanaraka amin'ny id an'ilay .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.

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

Miaraka amin'ny fanaraha-maso

Manampy amin'ny fanaraha-maso teo aloha sy manaraka:

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

Miaraka amin'ny famantarana

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

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

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.

<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

Ampio .carousel-fadeao amin'ny carousel-nao mba hampihetsi-po ny slides miaraka amin'ny fifindrana manjavona fa tsy slide.

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

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

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

Fampiasana

Amin'ny alàlan'ny data attributes

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

Ny data-ride="carousel"toetra dia ampiasaina hanamarihana carousel ho toy ny animating manomboka amin'ny entana pejy. Raha tsy mampiasa data-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:

$('.carousel').carousel()

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-interval="".

Anarana Type toerana misy anao Description
elanelana isa 5000 Ny faharetan'ny fotoana eo anelanelan'ny fandehanana mandeha ho azy amin'ny zavatra iray. Raha diso dia tsy mandeha ho azy ny carousel.
Ohatra boolean marina Na tokony hihetsika amin'ny hetsika fitendry ny carousel.
fiatoana string | boolean "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. Mariho fa ankoatra ny fihetsika totozy etsy ambony izany.
mitaingina tady DISO Alefao mandeha ho azy ny carousel rehefa avy manodina ny entana voalohany ny mpampiasa. Raha "carousel", dia alefa mandeha ho azy ny carousel amin'ny entana.
fonosina boolean marina Na tokony hivezivezy tsy tapaka ny carousel na hisy fiatoana mafy.
mikasika boolean marina Na ny carousel dia tokony hanohana ny fifampikasohana miankavia/ankavanana amin'ny fitaovana ecran touchy.

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 .

.carousel(options)

Manomboka ny carousel miaraka amin'ny safidy azo atao objectary manomboka mandehandeha amin'ny entana.

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

.carousel('cycle')

Mihodikodina amin'ireo singa carousel miankavia miankavanana.

.carousel('pause')

Manakana ny carousel tsy hivezivezy amin'ny entana.

.carousel(number)

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 (izany hoe alohan'ny slid.bs.carouselnitrangan'ny hetsika).

.carousel('prev')

Mihodina mankany amin'ny singa teo aloha. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa teo aloha (izany hoe alohan'ny slid.bs.carouselnitrangan'ny hetsika).

.carousel('next')

Mihodina mankany amin'ny singa manaraka. Miverina amin'ny mpiantso alohan'ny hisehoan'ny singa manaraka (izany hoe alohan'ny slid.bs.carouselnitrangan'ny hetsika).

.carousel('dispose')

Manimba ny carousel an'ny singa iray.

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
slide.bs.carousel Mirehitra avy hatrany ity hetsika ity rehefa ampiasaina ny slidefomba fiasa.
slid.bs.carousel Tafavoaka ity hetsika ity rehefa nahavita ny fifindrany ny carousel. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Hanova ny faharetan'ny tetezamita

Ny faharetan'ny tetezamita .carousel-itemdia azo ovaina miaraka amin'ny $carousel-transitionfari-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).