Source

Carousel

Isang bahagi ng slideshow para sa pagbibisikleta sa mga elemento—mga larawan o mga slide ng text—tulad ng isang carousel.

Paano ito gumagana

Ang carousel ay isang slideshow para sa pagbibisikleta sa isang serye ng content, na binuo gamit ang CSS 3D transforms at kaunting JavaScript. Gumagana ito sa isang serye ng mga larawan, teksto, o custom na markup. Kasama rin dito ang suporta para sa mga nauna/susunod na kontrol at indicator.

Sa mga browser kung saan sinusuportahan ang Page Visibility API , maiiwasan ng carousel ang pag-slide kapag hindi nakikita ng user ang webpage (gaya ng kapag hindi aktibo ang tab ng browser, pinaliit ang window ng browser, atbp.).

Ang epekto ng animation ng bahaging ito ay nakasalalay sa prefers-reduced-motionquery ng media. Tingnan ang seksyon ng pinababang paggalaw ng aming dokumentasyon ng pagiging naa-access .

Pakitandaan na ang mga nested carousel ay hindi sinusuportahan, at ang mga carousel ay karaniwang hindi sumusunod sa mga pamantayan ng accessibility.

Panghuli, kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .

Halimbawa

Hindi awtomatikong ginagawang normal ng mga carousel ang mga sukat ng slide. Dahil dito, maaaring kailanganin mong gumamit ng mga karagdagang kagamitan o mga custom na istilo sa naaangkop na laki ng nilalaman. Bagama't sinusuportahan ng mga carousel ang nakaraan/susunod na mga kontrol at tagapagpahiwatig, hindi ito tahasang kinakailangan. Magdagdag at mag-customize ayon sa nakikita mong angkop.

Kailangang idagdag ang .activeklase sa isa sa mga slide kung hindi ay hindi makikita ang carousel. Tiyaking magtakda din ng natatanging id sa .carouselpara sa mga opsyonal na kontrol, lalo na kung gumagamit ka ng maraming carousel sa isang page. Ang mga elemento ng kontrol at tagapagpahiwatig ay dapat may data-targetkatangian (o hrefpara sa mga link) na tumutugma sa id ng .carouselelemento.

Mga slide lang

Narito ang isang carousel na may mga slide lang. Tandaan ang presensya ng .d-blockat .w-100sa mga carousel na larawan upang maiwasan ang default na pagkakahanay ng imahe ng browser.

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

Na may mga kontrol

Pagdaragdag sa nakaraan at susunod na mga kontrol:

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

Sa mga tagapagpahiwatig

Maaari mo ring idagdag ang mga indicator sa carousel, kasama ng mga kontrol, din.

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

May mga caption

Magdagdag ng mga caption sa iyong mga slide nang madali gamit ang .carousel-captionelemento sa loob ng anumang .carousel-item. Madaling maitago ang mga ito sa mas maliliit na viewport, tulad ng ipinapakita sa ibaba, na may mga opsyonal na kagamitan sa pagpapakita . Itinago namin ang mga ito sa simula .d-noneat ibinabalik ang mga ito sa mga medium-sized na device na may .d-md-block.

Unang slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Pangalawang slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Pangatlong slide label

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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

Idagdag .carousel-fadesa iyong carousel para i-animate ang mga slide na may fade transition sa halip na 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>

Indibidwal na `.carousel-item`pagitan

Idagdag data-interval=""sa isang .carousel-itemupang baguhin ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta sa susunod na item.

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

Paggamit

Sa pamamagitan ng mga katangian ng data

Gumamit ng mga attribute ng data para madaling makontrol ang posisyon ng carousel. data-slidetumatanggap ng mga keyword prevo next, na nagbabago sa posisyon ng slide na nauugnay sa kasalukuyang posisyon nito. Bilang kahalili, gamitin data-slide-toupang ipasa ang isang raw slide index sa carousel data-slide-to="2", na naglilipat sa posisyon ng slide sa isang partikular na index na nagsisimula sa 0.

Ginagamit ang data-ride="carousel"attribute para markahan ang isang carousel bilang animating simula sa pag-load ng page. Kung hindi mo ginagamit data-ride="carousel"upang simulan ang iyong carousel, kailangan mo itong simulan mismo. Hindi ito maaaring gamitin sa kumbinasyon ng (kalabisan at hindi kailangan) tahasang pagsisimula ng JavaScript ng parehong carousel.

Sa pamamagitan ng JavaScript

Manu-manong tumawag sa carousel gamit ang:

$('.carousel').carousel()

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-interval="".

Pangalan	Uri	Default	Paglalarawan
pagitan	numero	5000	Ang tagal ng oras upang maantala sa pagitan ng awtomatikong pagbibisikleta ng isang item. Kung mali, hindi awtomatikong iikot ang carousel.
keyboard	boolean	totoo	Kung dapat tumugon ang carousel sa mga kaganapan sa keyboard.
huminto	string \| boolean	"hover"	Kung nakatakda sa `"hover"`, ipo-pause ang pagbibisikleta ng carousel sa `mouseenter`at ipagpatuloy ang pagbibisikleta ng carousel sa `mouseleave`. Kung nakatakda sa `false`, hindi ito mapo-pause ng pag-hover sa carousel. Sa mga touch-enabled na device, kapag nakatakda sa `"hover"`, ang pagbibisikleta ay ipo-pause sa `touchend`(kapag natapos na ang user na makipag-ugnayan sa carousel) sa loob ng dalawang pagitan, bago awtomatikong ipagpatuloy. Tandaan na ito ay karagdagan sa pag-uugali ng mouse sa itaas.
sumakay	string	mali	I-autoplay ang carousel pagkatapos manu-manong iikot ng user ang unang item. Kung "carousel", i-autoplay ang carousel sa pagkarga.
balutin	boolean	totoo	Kung ang carousel ay dapat na tuluy-tuloy na umiikot o may matitigas na paghinto.
hawakan	boolean	totoo	Kung dapat suportahan ng carousel ang mga pakikipag-ugnayan sa kaliwa/kanan na pag-swipe sa mga touchscreen na device.

Paraan

Mga asynchronous na pamamaraan at paglipat

Ang lahat ng mga pamamaraan ng API ay asynchronous at nagsisimula ng isang paglipat . Bumalik sila sa tumatawag sa sandaling magsimula ang paglipat ngunit bago ito matapos . Bilang karagdagan, babalewalain ang isang method call sa isang transitioning component .

Tingnan ang aming dokumentasyon ng JavaScript para sa higit pang impormasyon .

`.carousel(options)`

Sinisimulan ang carousel gamit ang isang opsyonal na opsyon objectat magsisimulang umikot sa mga item.

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

`.carousel('cycle')`

Umiikot sa mga carousel item mula kaliwa hanggang kanan.

`.carousel('pause')`

Pinipigilan ang carousel mula sa pagbibisikleta sa mga item.

`.carousel(number)`

Iniikot ang carousel sa isang partikular na frame (batay sa 0, katulad ng isang array). Bumabalik sa tumatawag bago naipakita ang target na item (ibig sabihin, bago slid.bs.carouselmangyari ang kaganapan).

`.carousel('prev')`

Ikot sa nakaraang item. Bumabalik sa tumatawag bago naipakita ang nakaraang item (ibig sabihin, bago slid.bs.carouselmangyari ang kaganapan).

`.carousel('next')`

Ikot sa susunod na item. Bumabalik sa tumatawag bago maipakita ang susunod na item (ibig sabihin bago slid.bs.carouselmangyari ang kaganapan).

`.carousel('dispose')`

Sinisira ang carousel ng isang elemento.

Mga kaganapan

Ang klase ng carousel ng Bootstrap ay naglalantad ng dalawang kaganapan para sa pag-hook sa pagpapagana ng carousel. Ang parehong mga kaganapan ay may mga sumusunod na karagdagang katangian:

direction: Ang direksyon kung saan dumudulas ang carousel (alinman "left"o "right").
relatedTarget: Ang elemento ng DOM na ini-slide sa lugar bilang aktibong item.
from: Ang index ng kasalukuyang item
to: Ang index ng susunod na item

Ang lahat ng mga kaganapan sa carousel ay pinaputok sa mismong carousel (ibig sabihin, sa <div class="carousel">).

Uri ng kaganapan	Paglalarawan
slide.bs.carousel	Agad na gagana ang kaganapang ito kapag `slide`ginamit ang paraan ng instance.
slid.bs.carousel	Ang kaganapang ito ay gagana kapag natapos na ng carousel ang paglipat ng slide nito.

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

Baguhin ang tagal ng transition

Maaaring baguhin ang tagal ng transition .carousel-itemng $carousel-transitionSass bago mag-compile o mga custom na istilo kung ginagamit mo ang pinagsama-samang CSS. Kung maraming transition ang inilapat, siguraduhing ang transisyon ng pagbabago ay unang tinukoy (hal. transition: transform 2s ease, opacity .5s ease-out).