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

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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
</div>

Miaraka amin'ny fanaraha-maso

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

Teo aloha Manaraka

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

Miaraka amin'ny famantarana

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

Teo aloha Manaraka

<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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

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.

Etikety slide voalohany

Nulla vitae elit libero, a pharetra augue mollis interdum.

Etikety kisary faharoa

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etikety slide fahatelo

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Teo aloha Manaraka

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

Crossfade

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

Teo aloha Manaraka

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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

fomba

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

$('#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).