Carousel
Chigawo cha chiwonetsero chazithunzi poyendetsa zinthu - zithunzi kapena masilayidi amawu - ngati karouse.
Carousel ndi chiwonetsero chazithunzi chakuyenda panjinga zingapo, zomangidwa ndi zosintha za CSS 3D ndi JavaScript pang'ono. Zimagwira ntchito ndi zithunzi zingapo, zolemba, kapena zolembera makonda. Zimaphatikizansopo zothandizira zowongolera zam'mbuyo / zotsatila ndi zizindikiro.
M'masakatuli omwe Tsamba Lowonekera API limathandizidwa, carousel imapewa kutsetsereka pomwe tsamba lawebusayiti silikuwoneka kwa wogwiritsa ntchito (monga pomwe tsamba la msakatuli silikugwira ntchito, zenera la osatsegula limachepetsedwa, ndi zina).
Chonde dziwani kuti ma carousel okhala ndi zisa sagwiritsidwa ntchito, ndipo ma carousel nthawi zambiri satsatira miyezo yofikira.
Pomaliza, ngati mukupanga JavaScript yathu kuchokera kugwero, pamafunikautil.js
.
Ma carousel samangosintha kukula kwa slide. Chifukwa chake, mungafunike kugwiritsa ntchito zina zowonjezera kapena masitayilo achikhalidwe kuti mukwaniritse kukula koyenera. Ngakhale ma carousel amathandizira maulamuliro am'mbuyomu/otsatira ndi zizindikiro, sizofunikira. Onjezani ndikusintha momwe mukufunira.
Kalasi .active
iyenera kuwonjezeredwa ku imodzi mwazithunzi apo ayi carousel sidzawoneka. Onetsetsaninso kuti mwakhazikitsa id yapadera pazowongolera zomwe .carousel
mwasankha, makamaka ngati mukugwiritsa ntchito ma carousel angapo patsamba limodzi. Zinthu zowongolera ndi zowonetsera ziyenera kukhala ndi mawonekedwe data-target
(kapena href
maulalo) omwe amafanana ndi id ya .carousel
chinthucho.
Nayi kalasi yokhala ndi masiladi okha. Dziwani kupezeka kwa zithunzi .d-block
ndi .w-100
pa carousel kuti mupewe kusanja kwazithunzi zosasinthika.
Kuwonjezera maulamuliro akale ndi otsatirawa:
Mukhozanso kuwonjezera zizindikiro ku carousel, pambali pa maulamuliro, nawonso.
Onjezani mawu omasulira pamasilayidi anu mosavuta ndi .carousel-caption
chinthu chomwe chili mkati mwa .carousel-item
. Atha kubisika mosavuta pamawonekedwe ang'onoang'ono, monga momwe tawonetsera pansipa, ndi zida zowonetsera . Timawabisa poyamba ndi .d-none
kuwabweretsanso pazida zokhala ndi .d-md-block
.
Onjezani .carousel-fade
ku carousel yanu kuti muwongolere ma slide ndi kusintha kozilala m'malo mwa slide.
Gwiritsani ntchito mawonekedwe a data kuti muwongolere malo a carousel mosavuta. data-slide
imavomereza mawu osakira prev
kapena next
, omwe amasintha malo a slide mogwirizana ndi momwe alili. Kapenanso, gwiritsani ntchito data-slide-to
kupatsira chithunzithunzi cha silayidi ku carousel data-slide-to="2"
, yomwe imasamutsa malo a slide kupita ku index inayake kuyambira ndi 0
.
Makhalidwewa data-ride="carousel"
amagwiritsidwa ntchito kuyika carousel ngati yosangalatsa kuyambira pamasamba. Sichingagwiritsidwe ntchito limodzi ndi (zosafunikira komanso zosafunikira) kutsegulira kwa JavaScript kwa carousel yomweyo.
Imbani carousel pamanja ndi:
Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-
, monga mu data-interval=""
.
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
nthawi | nambala | 5000 | Kuchuluka kwa nthawi yochedwetsa pakati pa kuyendetsa chinthu chokha. Ngati zabodza, carousel siizungulira yokha. |
kiyibodi | boolean | zoona | Kaya carousel ikuyenera kuchitapo kanthu pazochitika za kiyibodi. |
kupuma | chingwe | boolean | "kuyenda" | Ngati Pazida zoyatsidwa ndi kukhudza, zikakhazikitsidwa ku |
kukwera | chingwe | zabodza | Amasewera okha carousel wogwiritsa ntchito atazungulira pamanja chinthu choyamba. Ngati "carousel", imasewera okha carousel atanyamula. |
kulunga | boolean | zoona | Kaya carousel iyenera kuzungulira mosalekeza kapena kuyima movutikira. |
Asynchronous njira ndi kusintha
Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .
Imayambitsa carousel ndi zosankha zomwe mungasankhe object
ndikuyamba kuyendetsa zinthu.
Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja.
Imayimitsa carousel kuti isayendetse zinthu.
Azunguliza carousel ku chimango china (0 kutengera, ofanana ndi gulu). Amabwereranso kwa woyimbirayo chinthu chomwe mukufuna chisanasonyezedwe (ie zisanachitike slid.bs.carousel
).
Kuzungulira kwa chinthu cham'mbuyo. Imabwereranso kwa woyimbirayo chinthu cham'mbuyo chisanasonyezedwe (mwachitsanzo, slid.bs.carousel
chochitikacho chisanachitike).
Kuzungulira ku chinthu chotsatira. Imabwereranso kwa woyimbirayo chinthu china chisanasonyezedwe (mwachitsanzo, slid.bs.carousel
chochitikacho chisanachitike).
Kuwononga carousel ya element.
Kalasi ya carousel ya Bootstrap imawulula zochitika ziwiri zolumikizana ndi machitidwe a carousel. Zochitika zonsezi zili ndi zotsatirazi zowonjezera:
direction
: Njira yomwe carousel ikutsetserekera (kaya"left"
kapena"right"
).relatedTarget
: Chigawo cha DOM chomwe chikusunthidwa kuti chikhale chogwira ntchito.from
: Mndandanda wazinthu zamakonoto
: Mlozera wa chinthu chotsatira
Zochitika zonse za carousel zimathamangitsidwa pa carousel yomwe (ie pa <div class="carousel">
).
Mtundu wa Chochitika | Kufotokozera |
---|---|
slide.bs.carousel | Chochitika ichi chimayaka nthawi yomweyo slide njira yachitsanzo ikugwiritsidwa ntchito. |
slid.bs.carousel | Chochitikachi chimathamangitsidwa pamene carousel yamaliza kusintha kwake kwa slide. |
Nthawi yosinthira .carousel-item
imatha kusinthidwa ndikusintha kwa $carousel-transition
Sass musanapange kapena masitayilo achikhalidwe ngati mukugwiritsa ntchito CSS yophatikizidwa. Ngati masinthidwe angapo agwiritsidwa ntchito, onetsetsani kuti masinthidwewo afotokozedwa poyamba (mwachitsanzo. transition: transform 2s ease, opacity .5s ease-out
).