Carousel

Yon eleman diaporama pou monte bisiklèt nan eleman-imaj oswa glisad nan tèks-tankou yon Carousel.

Ki jan li fonksyone

Carousel la se yon diaporama pou monte bisiklèt atravè yon seri kontni, bati ak CSS 3D transfòme ak yon ti jan nan JavaScript. Li travay ak yon seri de imaj, tèks, oswa maketing koutim. Li gen ladan tou sipò pou kontwòl anvan / pwochen ak endikatè.

Nan navigatè kote API Vizibilite Paj la sipòte, Carousel la ap evite glise lè paj wèb la pa vizib pou itilizatè a (tankou lè tab navigatè a inaktif, fenèt navigatè a minimize, elatriye).

Tanpri sonje ke karousèl anbrike yo pa sipòte, e karousèl yo jeneralman pa konfòme ak estanda aksè.

Anfen, si w ap bati JavaScript nou an soti nan sous, li mande pouutil.js .

Egzanp

Carousels pa otomatikman nòmalize dimansyon glise yo. Kòm sa yo, ou ka bezwen sèvi ak sèvis piblik adisyonèl oswa estil koutim pou yon fason apwopriye gwosè kontni. Pandan ke karousèl sipòte kontwòl ak endikatè anvan/pwochen, yo pa klèman obligatwa. Ajoute ak personnaliser jan ou wè anfòm.

Yo .activedwe ajoute klas la nan youn nan glisad yo sinon karousèl la p ap vizib. Epitou asire w ke ou mete yon id inik sou la .carouselpou kontwòl opsyonèl, espesyalman si w ap itilize karousèl miltip sou yon sèl paj. Eleman kontwòl ak endikatè yo dwe gen yon data-targetatribi (oswa hrefpou lyen) ki matche ak id .carouseleleman an.

Slides sèlman

Isit la nan yon Carousel ak glisad sèlman. Remake prezans nan .d-blockak .w-100sou imaj Carousel pou anpeche aliyman imaj default navigatè a.

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

Avèk kontwòl

Ajoute nan kontwòl anvan ak pwochen yo:

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

Avèk endikatè

Ou kapab tou ajoute endikatè yo nan Carousel la, ansanm ak kontwòl yo tou.

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

Avèk tit

Ajoute ti tit nan diapositives ou yo fasil ak .carousel-captioneleman ki nan nenpòt ki .carousel-item. Yo ka kache fasilman sou vi ki pi piti yo, jan yo montre anba a, ak sèvis piblik opsyonèl . Nou kache yo okòmansman ak .d-nonepote yo tounen sou aparèy gwosè mwayen ak .d-md-block.

Premye etikèt glise

Nulla vitae elit libero, a pharetra augue mollis interdum.

Dezyèm etikèt glise

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Twazyèm etikèt glise

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

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

Crossfade

Ajoute .carousel-fadenan Carousel ou a pou anime glisad ak yon tranzisyon fennen olye de yon glisad.

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

Itilizasyon

Via atribi done yo

Sèvi ak atribi done yo fasil kontwole pozisyon nan Carousel la. data-slideaksepte mo kle yo prevoswa next, ki chanje pozisyon glise an parapò ak pozisyon aktyèl li. Altènativman, sèvi ak data-slide-toyo pase yon endèks glise anvan tout koreksyon nan Carousel la data-slide-to="2", ki chanjman pozisyon glise nan yon endèks patikilye kòmanse ak 0.

Yo data-ride="carousel"itilize atribi a pou make yon Carousel kòm animasyon apati chaj paj la. Li pa ka itilize nan konbinezon ak (redondan ak nesesè) inisyalizasyon JavaScript eksplisit nan menm Carousel la.

Via JavaScript

Rele Carousel manyèlman ak:

$('.carousel').carousel()

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-interval="".

Non	Kalite	Default	Deskripsyon
entèval	nimewo	5000	Kantite tan pou retade ant otomatikman monte bisiklèt yon atik. Si fo, Carousel pa pral otomatikman sik.
klavye	booleyen	vre	Si Carousel la ta dwe reyaji nan evènman klavye yo.
pran yon poz	fisèl \| booleyen	"plane"	Si mete sou `"hover"`, pran yon poz monte bisiklèt nan Carousel la `mouseenter`epi rekòmanse monte bisiklèt la nan Carousel la `mouseleave`. Si mete sou `false`, plane sou Carousel la pa pral pran poz li. Sou aparèy manyen yo, lè yo mete sou `"hover"`, monte bisiklèt ap pran yon poz sou `touchend`(yon fwa itilizatè a fini kominike avèk Carousel la) pou de entèval, anvan otomatikman rekòmanse. Remake byen ke sa a se anplis konpòtman sourit ki anwo a.
woulib	fisèl	fo	Autoplays Carousel la apre itilizatè a manyèlman sik premye atik la. Si "carousel", otoplays karousel la sou chaj.
vlope	booleyen	vre	Kit Carousel la ta dwe sikile kontinyèlman oswa si wi ou non si w ta dwe fè yon kanpe difisil.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon.

`.carousel(options)`

Inisyalize Carousel la ak yon opsyon opsyonèl objectepi kòmanse monte bisiklèt nan atik yo.

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

`.carousel('cycle')`

Fè sik nan atik yo Carousel de goch a dwat.

`.carousel('pause')`

Sispann Carousel la soti nan monte bisiklèt nan atik yo.

`.carousel(number)`

Cycles Carousel la nan yon ankadreman patikilye (0 ki baze sou, menm jan ak yon etalaj). Retounen bay moun kap rele a anvan yo te montre atik sib la (sa vle di anvan slid.bs.carouselevènman an rive).

`.carousel('prev')`

Cycles pou atik anvan an. Retounen bay moun k ap rele a anvan yo te montre atik anvan an (sa vle di anvan slid.bs.carouselevènman an rive).

`.carousel('next')`

Cycles pou atik kap vini an. Retounen bay moun k ap rele a anvan yo montre pwochen atik la (sa vle di anvan slid.bs.carouselevènman an rive).

`.carousel('dispose')`

Detwi Carousel yon eleman.

Evènman

Klas Carousel Bootstrap la ekspoze de evènman pou branche nan fonksyonalite Carousel. Tou de evènman yo gen pwopriyete adisyonèl sa yo:

direction: Direksyon kote kawozèl la ap glise (swa "left"oswa "right").
relatedTarget: Eleman DOM ke yo te glise an plas kòm atik aktif la.
from: Endèks atik aktyèl la
to: Endèks pwochen atik la

Tout evènman Carousel yo tire sou Carousel la li menm (sa vle di nan la <div class="carousel">).

Kalite Evènman	Deskripsyon
slide.bs.carousel	Evènman sa a dife imedyatman lè yo `slide`envoke metòd egzanp lan.
glise.bs.carousel	Evènman sa a revoke lè Carousel la fini tranzisyon glise li.

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

Chanje dire tranzisyon an

Dire tranzisyon an .carousel-itemka chanje ak $carousel-transitionvaryab Sass la anvan konpile oswa estil koutim si w ap itilize CSS konpile a. Si yo aplike plizyè tranzisyon, asire w ke tranzisyon transfòmasyon an defini an premye (eg. transition: transform 2s ease, opacity .5s ease-out).