Source

Carousel

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

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.

Chekupedzisira, kana iwe uchivaka yedu JavaScript kubva kunobva, inodautil.js .

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 ita shuwa yekuseta yakasarudzika id pane .carouselyesarudzo yekudzora, kunyanya kana iwe uchishandisa akawanda carousels pane imwechete peji. Kudzora uye chiratidzo zvinhu zvinofanirwa kuve data-targetnehunhu (kana hrefhwemalink) hunofanana neid .carouselyechinhu.

Masiraidhi chete

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

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

Nezvinodzora

Kuwedzera mune yapfuura uye inotevera kudzora:

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

Nezviratidzi

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

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

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.

<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

Wedzera .carousel-fadekucarousel yako kuti urarame masiraidhi neshanduko yakapera pachinzvimbo chesiraidhi.

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

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

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

Usage

Via data hunhu

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

Hunhu data-ride="carousel"hunoshandiswa kumaka carousel seanorarama kutanga pakurodha peji. Kana data-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:

$('.carousel').carousel()

Options

Sarudzo dzinogona kupfuudzwa kuburikidza nedata hunhu kana JavaScript. Nezve data hunhu, wedzera iyo sarudzo zita ku data-, semu data-interval="".

Zita Type Default Tsanangudzo
interval nhamba 5000 Huwandu hwenguva yekunonoka pakati pekuita bhasikoro chinhu. Kana nhema, carousel haizongotenderera ichitenderera.
keyboard boolean chokwadi Kunyangwe iyo carousel inofanirwa kuita kune keyboard zviitiko.
pause tambo | boolean "hovha"

Kana yaiswa kuti "hover", inombomira kubhasikoro kwekarosi mouseenteryotangazve 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. Ziva kuti izvi zviri kuwedzera kune iri pamusoro pekuita mbeva.

ride tambo nhema Inotamba otomatiki iyo carousel mushure mekunge mushandisi atenderedza chinhu chekutanga. Kana "carousel", inoridza otomatiki iyo carousel iri mutoro.
wrap boolean chokwadi Kunyangwe iyo carousel inofanirwa kutenderera ichitenderera kana kumira zvakaoma.
touch boolean chokwadi Kunyangwe iyo carousel inofanirwa kutsigira kuruboshwe/kurudyi swipe kupindirana pane touchscreen zvishandiso.

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 .

.carousel(options)

Inotanga carousel ine sarudzo yesarudzo objectuye inotanga kuchovha bhasikoro kuburikidza nezvinhu.

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

.carousel('cycle')

Kutenderera nepakati pezvinhu zvecarousel kubva kuruboshwe kuenda kurudyi.

.carousel('pause')

Inomisa carousel kubva kubhasikoro kuburikidza nezvinhu.

.carousel(number)

Inotenderedza carousel kune imwe furemu (0 yakavakirwa, yakafanana neyakarongwa). Inodzokera kune akafona chinhu chisati charatidzwa (kureva kuti slid.bs.carouselchiitiko chisati chaitika).

.carousel('prev')

Kutenderera kune chinhu chapfuura. Inodzokera kumunhu anenge afona chinhu chapfuura chisati charatidzwa (kureva kuti slid.bs.carouselchiitiko chisati chaitika).

.carousel('next')

Kutenderera kuenda kuchinhu chinotevera. Inodzokera kumunhu arikufona chinhu chinotevera chisati charatidzwa (kureva kuti slid.bs.carouselchiitiko chisati chaitika).

.carousel('dispose')

Inoparadza carousel yechimwe chinhu.

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 Type Tsanangudzo
slide.bs.carousel Ichi chiitiko chinopisa nekukasira kana slidenzira yemuenzaniso yakumbirwa.
slid.bs.carousel Ichi chiitiko chinodzingwa kana carousel yapedza shanduko yayo yemasiraidhi.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

Shandura nguva yekuchinja

Nguva yekushandura .carousel-iteminogona kuchinjwa $carousel-transitionneiyo 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).