Carousel
Chigawo cha chiwonetsero chazithunzi poyendetsa zinthu - zithunzi kapena masilaidi a mawu - ngati carousel.
Momwe zimagwirira ntchito
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).
prefers-reduced-motion
funso la media. Onani gawo
lochepetsedwa la zolemba zathu zofikira .
Chonde dziwani kuti ma carousel okhala ndi zisa sagwiritsidwa ntchito, ndipo ma carousel nthawi zambiri satsatira miyezo yofikira.
Chitsanzo
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 zapadera pazowongolera id
zomwe .carousel
mwasankha, makamaka ngati mukugwiritsa ntchito ma carousel angapo patsamba limodzi. Zinthu zowongolera ndi zowonetsera ziyenera kukhala ndi mawonekedwe data-bs-target
(kapena href
maulalo) omwe amafanana id
ndi .carousel
chinthucho.
Masilayidi okha
Nayi kalasi yokhala ndi masiladi okha. Dziwani kupezeka kwa zithunzi .d-block
ndi .w-100
pa carousel kuti mupewe kusanja kwazithunzi zosasinthika.
<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>
Ndi zowongolera
Kuwonjezera maulamuliro akale ndi otsatira. Timalimbikitsa kugwiritsa ntchito <button>
maelementi, koma mutha kugwiritsanso ntchito <a>
maelementi okhala ndi role="button"
.
<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>
Ndi zizindikiro
Mukhozanso kuwonjezera zizindikiro ku carousel, pambali pa maulamuliro, nawonso.
<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>
Ndi mawu ofotokozera
Onjezani mawu omasulira pamasiladi 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
.
<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
Onjezani .carousel-fade
ku carousel yanu kuti muwongolere ma slide ndi kusintha kozilala m'malo mwa slide. Kutengera zomwe zili mu carousel yanu (mwachitsanzo, ma slide okha), mungafune kuwonjezera .bg-body
kapena CSS yachikhalidwe ku .carousel-item
s kuti muwoloke bwino.
<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>
Munthu aliyense .carousel-item
payekha
Onjezani data-bs-interval=""
ku a .carousel-item
kuti musinthe kuchuluka kwa nthawi yochedwetsa pakati pa kupalasa njinga kupita ku chinthu chotsatira.
<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>
Letsani swiping pakukhudza
Ma Carousel amathandizira kusuntha kumanzere / kumanja pazida zowonekera kuti musunthe pakati pa masilayidi. Izi zitha kuzimitsidwa pogwiritsa ntchito mawonekedwe data-bs-touch
. Chitsanzo chomwe chili pansipa sichikuphatikizanso mawonekedwe data-bs-ride
kotero sichimasewerera.
<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>
Mtundu wakuda
Onjezani .carousel-dark
ku .carousel
zowongolera zakuda, zizindikiro, ndi mawu ofotokozera. Zowongolera zasinthidwa kuchoka ku kudzaza kwawo koyera ndi filter
katundu wa CSS. Mawu omasulira ndi maulamuliro ali ndi zina za Sass zomwe zimakonda kusintha color
ndi background-color
.
<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>
Kusintha mwamakonda
Nthawi yosinthira .carousel-item
imatha kusinthidwa ndikusintha kwa $carousel-transition-duration
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
).
Sass
Zosintha
Zosintha zama carousel onse:
$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`)
Zosintha za carousel yakuda :
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Kugwiritsa ntchito
Kudzera muzochita za data
Gwiritsani ntchito mawonekedwe a data kuti muwongolere malo a carousel mosavuta. data-bs-slide
imavomereza mawu osakira prev
kapena next
, omwe amasintha malo a slide mogwirizana ndi momwe alili pano. Kapenanso, gwiritsani ntchito data-bs-slide-to
kupititsa index ya silayidi ku carousel data-bs-slide-to="2"
, yomwe imasamutsa malo a slide kupita ku index inayake kuyambira ndi 0
.
Makhalidwewa data-bs-ride="carousel"
amagwiritsidwa ntchito kuyika carousel ngati yosangalatsa kuyambira pamasamba. Ngati simugwiritsa ntchito data-bs-ride="carousel"
kuyambitsa carousel yanu, muyenera kuyiyambitsa nokha. Sichingagwiritsidwe ntchito limodzi ndi (zosafunikira komanso zosafunikira) kutsegulira kwa JavaScript kwa carousel yomweyo.
Kudzera pa JavaScript
Imbani carousel pamanja ndi:
const carousel = new bootstrap.Carousel('#myCarousel')
Zosankha
Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-
, monga data-bs-animation="{value}"
. Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"
m'malo mwa data-bs-customClass="beautifier"
.
Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-config
chomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'
pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"
title
456
data-bs-config
data-bs-delay='{"show":0,"hide":150}'
Dzina | Mtundu | Zosasintha | Kufotokozera |
---|---|---|---|
interval |
nambala | 5000 |
Kuchuluka kwa nthawi yochedwetsa pakati pa kuyendetsa chinthu chokha. |
keyboard |
boolean | true |
Kaya carousel ikuyenera kuchitapo kanthu pazochitika za kiyibodi. |
pause |
string, boole | "hover" |
Ngati "hover" ikonzedwa , imitsani kukwera njinga ya carousel mouseenter ndikuyambanso kukwera njinga ya carousel pa mouseleave . Ngati false itayikidwa , kuyimirira pamwamba pa carousel sikuyimitsa. Pazida zoyatsidwa ndi kukhudza, zikakhazikitsidwa ku "hover" , kupalasa njinga kudzayima touchend (wogwiritsa ntchito akamaliza kucheza ndi carousel) kwa magawo awiri, asanayambenso. Izi ndi kuwonjezera pa khalidwe la mbewa. |
ride |
string, boole | false |
Ngati itayikidwa ku true , imasewera okha carousel wogwiritsa ntchito atazungulira pamanja chinthu choyamba. Ngati itayikidwa ku "carousel" , imasewera yokha carousel yomwe ili ndi katundu. |
touch |
boolean | true |
Kaya carousel iyenera kuthandizira kusinthana kwa swipe kumanzere/kumanja pazida zapa touchscreen. |
wrap |
boolean | true |
Kaya carousel iyenera kuzungulira mosalekeza kapena kuyima movutikira. |
Njira
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 .
Mutha kupanga chochita cha carousel ndi wopanga carousel, mwachitsanzo, kuti muyambe ndi zina zowonjezera ndikuyamba kupalasa njinga kudzera muzinthu:
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
wrap: false
})
Njira | Kufotokozera |
---|---|
cycle |
Amazungulira zinthu za carousel kuchokera kumanzere kupita kumanja. |
dispose |
Kuwononga carousel ya element. (Imachotsa deta yosungidwa pa chinthu cha DOM) |
getInstance |
Njira yosasunthika yomwe imakupatsani mwayi woti mugwirizane ndi chinthu cha DOM, mutha kuchigwiritsa ntchito motere: bootstrap.Carousel.getInstance(element) . |
getOrCreateInstance |
Njira yosasunthika yomwe imabweretsanso chochitika cha carousel chokhudzana ndi chinthu cha DOM kapena kupanga china china ngati sichinayambike. Mutha kugwiritsa ntchito motere bootstrap.Carousel.getOrCreateInstance(element) :. |
next |
Kuzungulira ku chinthu chotsatira. Imabwereranso kwa woyimbirayo chinthu china chisanasonyezedwe (mwachitsanzo, slid.bs.carousel chochitika chisanachitike). |
nextWhenVisible |
Osayendetsa carousel kupita kwina pomwe tsamba silikuwoneka kapena carousel kapena kholo lake silikuwoneka. Imabwerera kwa woyimbirayo chinthu chomwe mukufuna chisanasonyezedwe . |
pause |
Imayimitsa carousel kuti isayendetse zinthu. |
prev |
Kuzungulira kwa chinthu cham'mbuyo. Imabwerera kwa woyimbayo chinthu cham'mbuyo chisanasonyezedwe (mwachitsanzo, slid.bs.carousel chochitikacho chisanachitike). |
to |
Azunguliza carousel ku chimango china (0 kutengera, ofanana ndi gulu). Kubwerera kwa woyimbayo chinthu chomwe mukufuna chisanasonyezedwe (mwachitsanzo, slid.bs.carousel chochitikacho chisanachitike). |
Zochitika
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 |
---|---|
slid.bs.carousel |
Kuwotchedwa pamene carousel yamaliza kusintha kwake kwa slide. |
slide.bs.carousel |
Kuwotcha nthawi yomweyo slide njira yachitsanzo ikugwiritsidwa ntchito. |
const myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', event => {
// do something...
})