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).
prefers-reduced-motion
nemubvunzo 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 .active
inoda kuwedzerwa kune imwe yemasiraidhi zvikasadaro carousel haizoonekwe. Zvakare ive shuwa yekuseta yakasarudzika id
pane .carousel
yesarudzo yekudzora, kunyanya kana iwe uchishandisa akawanda carousels pane imwechete peji. Kudzora uye chiratidzo zvinhu zvinofanirwa kuve data-target
nehunhu (kana href
hwemalink) hunoenderana neiyo id
chinhu .carousel
.
Masiraidhi chete
Heino carousel ine masiraidhi chete. Ziva kuvepo kweiyo .d-block
uye .w-100
pa 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 zvakapfuura uye zvinotevera zvinodzora. Isu tinokurudzira kushandisa <button>
zvinhu, asi iwe unogona zvakare kushandisa <a>
zvinhu zvine role="button"
.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Nemashoko anotsanangura
Wedzera zvinyorwa kune masiraidhi ako zviri nyore nechinhu .carousel-caption
chiri mukati mechero .carousel-item
. Zvinogona kuvanzwa zviri nyore pamadiki ekuona, sezvaratidzwa pazasi, zvine sarudzo yekuratidzira zvishandiso . Tinovavanza pakutanga .d-none
nekuvadzosa 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>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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Crossfade
Wedzera .carousel-fade
kucarousel yako kuti urarame masiraidhi neshanduko yakapera pachinzvimbo chesiraidhi. Zvichienderana necarousel yako yemukati (semuenzaniso, zvinyorwa chete masiraidhi), ungangoda kuwedzera .bg-body
kana imwe tsika CSS kune iyo .carousel-item
s yekuyambuka kwakaringana.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Individual .carousel-item
interval
Wedzera data-interval=""
kune a .carousel-item
kuti 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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Dzima kutsvaira kwekubata
Carousels inotsigira swiping kuruboshwe/kurudyi pane touchscreen zvishandiso kuti ufambe pakati pemasiraidhi. Izvi zvinogona kuvharwa uchishandisa data-touch
hunhu. Muenzaniso uri pazasi zvakare hausanganisire data-ride
hunhu uye une data-interval="false"
saka hauite otomatiki.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Usage
Via data hunhu
Shandisa data hunhu kudzora zviri nyore chinzvimbo checarousel. data-slide
inogamuchira mazwi makuru prev
kana next
, iyo inoshandura nzvimbo yemasiraidhi maererano nenzvimbo yayo yazvino. Neimwe nzira, shandisa data-slide-to
kupfuudza 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 false , carousel haizongotenderera kutenderera. |
keyboard | boolean | chokwadi | Kunyangwe iyo carousel inofanirwa kuita kune keyboard zviitiko. |
pause | tambo | boolean | 'hover' | Kana yaiswa kuti Pamidziyo inogonesa kubata, kana yaiswa |
ride | tambo | nhema | Inotamba otomatiki iyo carousel mushure mekunge mushandisi atenderedza chinhu chekutanga. Kana yaiswa ku 'carousel' , inoridza otomatiki iyo carousel iri kuremerwa. |
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 .
.carousel(options)
Inotanga carousel ine sarudzo yesarudzo object
uye 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.carousel
chiitiko chisati chaitika).
.carousel('prev')
Kutenderera kune chinhu chapfuura. Inodzokera kumunhu anenge afona chinhu chapfuura chisati charatidzwa (kureva kuti slid.bs.carousel
chiitiko chisati chaitika).
.carousel('next')
Kutenderera kuenda kuchinhu chinotevera. Inodzokera kumunhu arikufona chinhu chinotevera chisati charatidzwa (kureva kuti slid.bs.carousel
chiitiko chisati chaitika).
.carousel('dispose')
Inoparadza carousel yechimwe chinhu.
.carousel('nextWhenVisible')
Usatenderedze carousel kuenda kune inotevera kana peji risingaonekwe kana carousel kana mubereki wayo asiri kuoneka. Inodzokera kumunhu arikufona chinhu chinotevera chisati charatidzwa (kureva kuti slid.bs.carousel
chiitiko chisati chaitika).
.carousel('to')
Inotenderedza carousel kune imwe furemu (0 yakavakirwa, yakafanana neyakarongwa). Inodzokera kumunhu arikufona chinhu chinotevera chisati charatidzwa (kureva kuti 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 chazvinoto
: 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 slide nzira 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-item
inogona kuchinjwa $carousel-transition
neiyo 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
).