Carousel

Chikamu chemasiraidhi chekuchovha bhasikoro kuburikidza nezvinhu-mifananidzo kana masiraidhi ezvinyorwa-sekarosi.

Pa peji ino

Zvinoshanda sei

Iyo carousel islideshow yekuchovha bhasikoro kuburikidza neyakatevedzana yemukati, yakavakwa neCSS 3D inoshandura uye zvishoma zveJavaScript. Inoshanda neakatevedzana emifananidzo, zvinyorwa, kana tsika markup. Inosanganisirawo kutsigirwa kwezvakapfuura / zvinotevera zvidzoreso uye zviratidzo.

Mumabhurawuza anotsigirwa nePeji Kuonekwa API , iyo carousel inodzivirira kutsvedza kana peji rewebhu risingaonekwe kumushandisi (senge kana iyo browser tab isingashande, hwindo rebrowser rinoderedzwa, nezvimwewo).

Iyo animation mhedzisiro yechikamu ichi zvinoenderana prefers-reduced-motionnemubvunzo wenhau. Ona chikamu chakaderedzwa chezvinyorwa zvedu zvekusvikika .

Ndapota ziva kuti nested carousels haatsigirwe, uye carousels kazhinji haaenderane neanowanikwa.

Muenzaniso

Carousels haingogadzirisi masiraidhi zviyero. Saka nekudaro, ungangoda kushandisa zvimwe zvinoshandiswa kana masitaera etsika kuti aenzane nehukuru hwemukati. Nepo macarousels achitsigira apfuura / anotevera zvidzoreso uye zviratidzo, izvo hazvidiwe zvakajeka. Wedzera uye gadzirisa sezvaunoona zvakakodzera.

Kirasi .activeinoda kuwedzerwa kune imwe yemasiraidhi zvikasadaro carousel haizoonekwe. Zvakare ive shuwa yekuseta yakasarudzika idpane .carouselyesarudzo yekudzora, kunyanya kana iwe uchishandisa akawanda carousels pane imwechete peji. Kudzora uye chiratidzo zvinhu zvinofanirwa kuve data-bs-targetnehunhu (kana hrefhwemalink) hunoenderana neiyo idchinhu .carousel.

Masiraidhi chete

Heino carousel ine masiraidhi chete. Ziva kuvepo kweiyo .d-blockuye .w-100pa carousel mifananidzo kudzivirira browser default image alignment.

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>

Nezvinodzora

Kuwedzera mune zvakapfuura uye zvinotevera zvinodzora. Isu tinokurudzira kushandisa <button>zvinhu, asi iwe unogona zvakare kushandisa <a>zvinhu zvine 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>

Nezviratidzi

Iwe unogona zvakare kuwedzera zviratidzo kune carousel, padivi pezvinodzora, zvakare.

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>

Nemashoko anotsanangura

Wedzera zvinyorwa kune masiraidhi ako zviri nyore nechinhu .carousel-captionchiri mukati mechero .carousel-item. Zvinogona kuvanzwa zviri nyore pamadiki ekuona, sezvaratidzwa pazasi, zvine sarudzo yekuratidzira zvishandiso . Tinovavanza pakutanga .d-nonenekuvadzosa pamidziyo yepakati nepakati ine .d-md-block.

Kutanga masiraidhi

Zvimwe zvinomiririra chibatiso chenzvimbo chekutanga siraidhi.

Siraidhi yechipiri

Zvimwe zvinomiririra zvechibatiso chechipiri chesiraidhi.

Siraidhi yechitatu

Zvimwe zvinomiririra zvibatiso zvechisiraidhi chechitatu.

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

Wedzera .carousel-fadekucarousel yako kuti urarame masiraidhi neshanduko yakapera pachinzvimbo chesiraidhi. Zvichienderana nezvako zvecarousel zvemukati (semuenzaniso, zvinyorwa chete masiraidhi), ungangoda kuwedzera .bg-bodykana imwe tsika CSS kune iyo .carousel-items yekuyambuka kwakaringana.

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>

Individual `.carousel-item`interval

Wedzera data-bs-interval=""kune a .carousel-itemkuti uchinje huwandu hwenguva yekunonoka pakati pekuchovha otomatiki kune chinotevera chinhu.

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>

Dzima kutsvaira kwekubata

Carousels inotsigira swiping kuruboshwe/kurudyi pane touchscreen zvishandiso kuti ufambe pakati pemasiraidhi. Izvi zvinogona kuvharwa uchishandisa data-bs-touchhunhu. Muenzaniso uri pazasi zvakare haubatanidzi data-bs-ridehunhu saka hauite otomatiki.

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>

Dark musiyano

Wedzera .carousel-darkkune .carouselyakasviba zvinodzora, zviratidzo, uye zvinyorwa. Zvidzoreso zvakadzoserwa kubva kune yavo yakasarudzika chena kuzadza filterneCSS pfuma. Captions uye zvinodzora zvine mamwe maSass akasiyana anogadzirisa iyo coloruye background-color.

Kutanga masiraidhi

Zvimwe zvinomiririra chibatiso chenzvimbo chekutanga siraidhi.

Siraidhi yechipiri

Zvimwe zvinomiririra zvechibatiso chechipiri chesiraidhi.

Siraidhi yechitatu

Zvimwe zvinomiririra zvibatiso zvechisiraidhi chechitatu.

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>

Custom shanduko

Nguva yekushandura .carousel-iteminogona kuchinjwa $carousel-transition-durationneiyo Sass chinja usati wanyora kana masitaera etsika kana uri kushandisa iyo yakaunganidzwa CSS. Kana shanduko dzakawanda dzikaiswa, ita shuwa kuti shanduko inotsanangurwa kutanga (semuenzaniso transition: transform 2s ease, opacity .5s ease-out).

Sass

Variables

Variables kune ese carousels:

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

Zvinosiyana zveiyo rima carousel :

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

Usage

Via data hunhu

Shandisa data hunhu kudzora zviri nyore chinzvimbo checarousel. data-bs-slideinogamuchira mazwi makuru prevkana next, iyo inoshandura nzvimbo yemasiraidhi maererano nenzvimbo yayo yazvino. Neimwe nzira, shandisa data-bs-slide-tokupfuudza masiraidhi indekisi ku carousel data-bs-slide-to="2", iyo inoshandura nzvimbo yemasiraidhi kuenda kune imwe index inotanga na 0.

Hunhu data-bs-ride="carousel"hunoshandiswa kumaka carousel seanorarama kutanga pakurodha peji. Kana data-bs-ride="carousel"ukasashandisa kutanga carousel yako, unofanira kuitanga iwe pachako. Haikwanise kushandiswa pamwe chete ne (zvisina basa uye zvisina basa) zvakajeka JavaScript kutanga kwekarosi imwechete.

Via JavaScript

Fonera carousel nemaoko ne:

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

Options

Sezvo sarudzo dzichigona kupfuudzwa kuburikidza nedata hunhu kana JavaScript, unogona kuisa sarudzo zita ku data-bs-, semu data-bs-animation="{value}". Ita shuwa yekushandura mhando yekesi yezita resarudzo kubva ku " camelCase " kuenda ku " kebab-case " kana uchipfuura sarudzo kuburikidza ne data hunhu. Somuenzaniso, shandisa data-bs-custom-class="beautifier"pane data-bs-customClass="beautifier".

Kubva kuBootstrap 5.2.0, zvese zvinongedzo zvinotsigira muyedzo wakachengetedzwa data hunhu data-bs-confighunogona kuisa akareruka chechikamu kumisikidzwa setambo yeJSON. Kana chinhu chine data-bs-config='{"delay":0, "title":123}'uye data-bs-title="456"hunhu, kukosha kwekupedzisira titlekuchave 456uye iyo yakaparadzana data hunhu inodarika kukosha kwakapihwa pa data-bs-config. Pamusoro pezvo, hunhu huripo hwe data hunokwanisa kuisa hunhu hweJSON senge data-bs-delay='{"show":0,"hide":150}'.

Zita	Type	Default	Tsanangudzo
`interval`	nhamba	`5000`	Huwandu hwenguva yekunonoka pakati pekuita bhasikoro chinhu.
`keyboard`	boolean	`true`	Kunyangwe iyo carousel inofanirwa kuita kune keyboard zviitiko.
`pause`	string, boolean	`"hover"`	Kana yaiswa kuti `"hover"`, inombomira kubhasikoro kwekarosi `mouseenter`yotangazve kuchovha bhasikoro pa `mouseleave`. Kana yaiswa kuti `false`, kudzengerera pamusoro pekarosi hakuzomire. Pamidziyo inogonesa kubata, kana yaiswa `"hover"`, kuchovha bhasikoro kunombomira `touchend`(kana mushandisi angopedza kufambidzana necarousel) kwenguva mbiri, asati atangazve. Izvi zviri kuwedzera kune maitiro embeva.
`ride`	string, boolean	`false`	Kana yaiswa ku `true`, inoridza otomatiki iyo carousel mushure mekunge mushandisi atenderedza chinhu chekutanga. Kana yaiswa ku `"carousel"`, inoridza otomatiki iyo carousel iri kuremerwa.
`touch`	boolean	`true`	Kunyangwe iyo carousel inofanirwa kutsigira kuruboshwe/kurudyi swipe kupindirana pane touchscreen zvishandiso.
`wrap`	boolean	`true`	Kunyangwe iyo carousel inofanirwa kutenderera ichitenderera kana kumira zvakaoma.

Nzira

Asynchronous nzira uye shanduko

Yese nzira dzeAPI dzine asynchronous uye dzinotanga shanduko . Vanodzokera kumunhu anenge afona pachangotanga shanduko asi isati yapera . Pamusoro pezvo, kufona kwenzira pachikamu chekuchinja kuchafuratirwa .

Ona zvinyorwa zvedu zveJavaScript kuti uwane rumwe ruzivo .

Iwe unogona kugadzira chiitiko checarousel nemugadziri wecarousel, semuenzaniso, kutanga nekuwedzera sarudzo uye wotanga kuchovha bhasikoro kuburikidza nezvinhu:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Nzira	Tsanangudzo
`cycle`	Kutenderera nepakati pezvinhu zvecarousel kubva kuruboshwe kuenda kurudyi.
`dispose`	Inoparadza carousel yechimwe chinhu. (Inobvisa data rakachengetwa pachinhu cheDOM)
`getInstance`	Static nzira iyo inokutendera iwe kuti uwane iyo carousel muenzaniso yakabatana neiyo DOM chinhu, unogona kuishandisa seizvi: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Static nzira inodzosa chiitiko checarousel chakabatana nechinhu cheDOM kana kugadzira chitsva kana chisina kutangwa. Unogona kuishandisa sezvizvi `bootstrap.Carousel.getOrCreateInstance(element)`:.
`next`	Kutenderera kuenda kuchinhu chinotevera. Inodzokera kune akafona chinhu chinotevera chisati charatidzwa (semuenzaniso, `slid.bs.carousel`chiitiko chisati chaitika).
`nextWhenVisible`	Usatenderedze carousel kuenda kune inotevera kana peji risingaonekwe kana carousel kana mubereki wayo asiri kuoneka. Inodzokera kumunhu anenge afona isati yaratidzwa .
`pause`	Inomisa carousel kubva kubhasikoro kuburikidza nezvinhu.
`prev`	Kutenderera kune chinhu chapfuura. Inodzokera kune akafona chinhu chapfuura chisati charatidzwa (semuenzaniso, `slid.bs.carousel`chiitiko chisati chaitika).
`to`	Inotenderedza carousel kune imwe furemu (0 yakavakirwa, yakafanana neyakarongwa). Inodzokera kune akafona chinhu chisati charatidzwa (semuenzaniso, `slid.bs.carousel`chiitiko chisati chaitika).

Zviitiko

Bootstrap's carousel kirasi inofumura zviitiko zviviri zvekukochekera mukuita kwecarousel. Zviitiko zviviri izvi zvine zvimwe zvinotevera:

direction: Nzira iyo carousel iri kutsvedza (zvichida "left"kana "right").
relatedTarget: Chinhu cheDOM chiri kutsvedzerwa panzvimbo sechinhu chinoshanda.
from: Indekisi yechinhu chazvino
to: Indekisi yechinhu chinotevera

Zvese zviitiko zvecarousel zvinodzingwa pacarousel pachayo (kureva pa <div class="carousel">).

Chiitiko mhando	Tsanangudzo
`slid.bs.carousel`	Kudzingwa kana carousel yapedza shanduko yayo yemasiraidhi.
`slide.bs.carousel`	Moto pakarepo kana iyo `slide`muenzaniso nzira yakumbirwa.

const myCarousel = document.getElementById('myCarousel')

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

Carousel

Zvinoshanda sei

Muenzaniso

Masiraidhi chete

Nezvinodzora

Nezviratidzi

Nemashoko anotsanangura

Kutanga masiraidhi

Siraidhi yechipiri

Siraidhi yechitatu

Crossfade

Individual .carousel-iteminterval

Dzima kutsvaira kwekubata

Dark musiyano

Kutanga masiraidhi

Siraidhi yechipiri

Siraidhi yechitatu

Custom shanduko

Sass

Variables

Usage

Via data hunhu

Via JavaScript

Options

Nzira

Asynchronous nzira uye shanduko

Zviitiko

Individual `.carousel-item`interval