Carousel
Ohun elo agbelera fun gigun kẹkẹ nipasẹ awọn eroja — awọn aworan tabi awọn ifaworanhan ti ọrọ — bii carousel kan.
Carousel jẹ agbelera fun gigun kẹkẹ nipasẹ onka akoonu, ti a ṣe pẹlu awọn iyipada CSS 3D ati diẹ ninu JavaScript. O ṣiṣẹ pẹlu lẹsẹsẹ awọn aworan, ọrọ, tabi isamisi aṣa. O tun pẹlu atilẹyin fun iṣaaju/awọn idari atẹle ati awọn itọkasi.
Ninu awọn aṣawakiri nibiti API Hihan Oju -iwe ti ni atilẹyin, carousel yoo yago fun sisun nigbati oju opo wẹẹbu ko ba han si olumulo (bii nigbati taabu ẹrọ aṣawakiri ko ṣiṣẹ, window aṣawakiri ti dinku, ati bẹbẹ lọ).
Jọwọ ṣe akiyesi pe awọn carousels oni ite ko ni atilẹyin, ati pe awọn carousels ni gbogbogbo ko ni ibamu pẹlu awọn iṣedede iraye si.
Nikẹhin, ti o ba n kọ JavaScript wa lati orisun, o niloutil.js
.
Carousels ko ṣe deede awọn iwọn ifaworanhan laifọwọyi. Bi iru bẹẹ, o le nilo lati lo awọn ohun elo afikun tabi awọn aṣa aṣa lati ṣe iwọn akoonu ti o yẹ. Lakoko ti awọn carousels ṣe atilẹyin awọn idari iṣaaju / atẹle ati awọn itọkasi, wọn ko nilo ni gbangba. Ṣafikun ati ṣe akanṣe bi o ṣe rii pe o yẹ.
Rii daju lati ṣeto id alailẹgbẹ lori .carousel
fun awọn idari iyan, paapaa ti o ba nlo awọn carousels pupọ lori oju-iwe kan.
Eyi ni carousel kan pẹlu awọn kikọja nikan. Ṣe akiyesi wiwa ti .d-block
ati .img-fluid
lori awọn aworan carousel lati ṣe idiwọ titete aworan aiyipada aṣawakiri.
<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="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
Ṣafikun ni iṣaaju ati awọn iṣakoso atẹle:
<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="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." 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>
O tun le ṣafikun awọn itọka si carousel, lẹgbẹẹ awọn idari, paapaa.
<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="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." 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>
Ibẹrẹ nkan ti nṣiṣe lọwọ nilo
Kilasi .active
nilo lati fi kun si ọkan ninu awọn kikọja naa. Bibẹẹkọ, carousel kii yoo han.
Ṣafikun awọn akọle si awọn ifaworanhan rẹ ni irọrun pẹlu .carousel-caption
eroja laarin eyikeyi .carousel-item
. Wọn le farapamọ ni irọrun lori awọn ibudo wiwo kekere, bi a ṣe han ni isalẹ, pẹlu awọn ohun elo ifihan aṣayan . A tọju wọn lakoko pẹlu .d-none
ati mu wọn pada lori awọn ẹrọ alabọde pẹlu .d-md-block
.
Lo awọn abuda data lati ṣakoso ni irọrun ipo ti carousel. data-slide
gba awọn koko-ọrọ prev
tabi next
, eyiti o paarọ ipo ifaworanhan ni ibatan si ipo lọwọlọwọ rẹ. Ni omiiran, lo data-slide-to
lati kọja atọka ifaworanhan aise si carousel data-slide-to="2"
, eyiti o yi ipo ifaworanhan si atọka kan pato ti o bẹrẹ pẹlu 0
.
Ẹya data-ride="carousel"
naa ni a lo lati samisi carousel kan bi ere idaraya ti o bẹrẹ ni fifuye oju-iwe. Ko ṣee lo ni apapo pẹlu (laiṣe ati kobojumu) ipilẹṣẹ JavaScript ti o fojuhan ti carousel kanna.
Pe carousel pẹlu ọwọ pẹlu:
Awọn aṣayan le ṣee kọja nipasẹ awọn abuda data tabi JavaScript. Fun awọn abuda data, fi orukọ aṣayan si data-
, bi ninu data-interval=""
.
Oruko | Iru | Aiyipada | Apejuwe |
---|---|---|---|
aarin | nọmba | 5000 | Iye akoko lati ṣe idaduro laarin gigun kẹkẹ ohun kan laifọwọyi. Ti o ba jẹ eke, carousel kii yoo yipo laifọwọyi. |
keyboard | boolianu | ooto | Boya carousel yẹ ki o fesi si awọn iṣẹlẹ keyboard. |
da duro | okun | boolianu | "rababa" | Ti o ba ṣeto si Lori awọn ẹrọ ti o ni ifọwọkan, nigbati o ba ṣeto si |
gigun | okun | eke | Ṣe adaṣe carousel ni adaṣe lẹhin ti olumulo fi ọwọ yi nkan akọkọ. Ti "carousel", ṣe adaṣe carousel lori fifuye. |
murasilẹ | boolianu | ooto | Boya carousel yẹ ki o yipo nigbagbogbo tabi ni awọn iduro lile. |
Awọn ọna Asynchronous ati awọn iyipada
Gbogbo awọn ọna API jẹ asynchronous ati bẹrẹ iyipada kan . Wọn pada si ọdọ olupe ni kete ti iyipada ti bẹrẹ ṣugbọn ṣaaju ki o to pari . Ni afikun, ipe ọna kan lori paati iyipada yoo jẹ kọbikita .
Ti bẹrẹ carousel pẹlu awọn aṣayan iyan object
ati bẹrẹ gigun kẹkẹ nipasẹ awọn ohun kan.
Yiyipo nipasẹ awọn ohun carousel lati osi si otun.
Da carousel duro lati gigun kẹkẹ nipasẹ awọn ohun kan.
Yi kẹkẹ carousel lọ si fireemu kan pato (orisun 0, iru si orun). Pada si olupe ṣaaju ki o to han ohun ibi-afẹde (ie ṣaaju ki slid.bs.carousel
iṣẹlẹ naa to waye).
Awọn iyipo si nkan ti tẹlẹ. Pada si olupe ṣaaju ki ohun ti tẹlẹ ti han (ie ṣaaju ki slid.bs.carousel
iṣẹlẹ to waye).
Awọn iyipo si nkan atẹle. Pada si olupe ṣaaju ki ohun ti o tẹle ti han (ie ṣaaju ki slid.bs.carousel
iṣẹlẹ to waye).
Pa carousel eroja run.
Kilasi carousel Bootstrap ṣafihan awọn iṣẹlẹ meji fun sisọ sinu iṣẹ ṣiṣe carousel. Awọn iṣẹlẹ mejeeji ni awọn ohun-ini afikun wọnyi:
direction
: Awọn itọsọna ninu eyi ti awọn carousel ti wa ni sisun (boya"left"
tabi"right"
).relatedTarget
: Eroja DOM ti o wa ni slid sinu aaye bi ohun ti nṣiṣe lọwọ.from
: Atọka ti nkan lọwọlọwọto
: Atọka ti nkan atẹle
Gbogbo awọn iṣẹlẹ carousel jẹ ina si carousel funrararẹ (ie ni <div class="carousel">
).
Iṣẹlẹ Iru | Apejuwe |
---|---|
slide.bs.carousel | Iṣẹlẹ yii ina lẹsẹkẹsẹ nigbati ọna slide apẹẹrẹ ba pe. |
slid.bs.carousel | Iṣẹlẹ yii jẹ ina nigbati carousel ti pari iyipada ifaworanhan rẹ. |