Carousel
Bangaren nunin faifai don yin keke ta hanyar abubuwa-hotuna ko nunin faifai na rubutu-kamar carousel.
Yadda yake aiki
Carousel nunin nunin faifai ne don yin keke ta hanyar jerin abubuwan ciki, wanda aka gina tare da canza canjin CSS 3D da ɗan JavaScript. Yana aiki tare da jerin hotuna, rubutu, ko alama na al'ada. Hakanan ya haɗa da goyan baya don sarrafawa na baya/na gaba da masu nuni.
A cikin masu bincike inda API ɗin Visibility Page ke samun goyan bayan, carousel ɗin zai guje wa zamewa lokacin da shafin yanar gizon ba ya ga mai amfani (kamar lokacin da shafin yanar gizon ba ya aiki, an rage girman taga mai lilo, da sauransu).
prefers-reduced-motion
tambayar kafofin watsa labarai. Dubi
raguwar sashin motsi na takaddun damar mu .
Da fatan za a sani cewa ba a tallafawa carousels na gida, kuma carousels gabaɗaya baya bin ka'idodin samun dama.
Misali
Carousels ba sa daidaita girman faifai ta atomatik. Don haka, ƙila kuna buƙatar amfani da ƙarin kayan aiki ko salo na musamman don girman abun ciki daidai. Yayin da carousels ke goyan bayan sarrafawa na baya/na gaba da masu nuni, ba a buƙatar su a sarari. Ƙara ku keɓance yadda kuka ga dama.
Ana .active
buƙatar ƙara ajin zuwa ɗaya daga cikin nunin faifai in ba haka ba ba za a iya ganin carousel ba. Hakanan tabbatar da saita na musamman id
akan abubuwan .carousel
sarrafawa na zaɓi, musamman idan kuna amfani da carousels da yawa akan shafi ɗaya. Abubuwan sarrafawa da masu nuna alama dole ne su kasance da data-bs-target
sifa (ko href
don hanyoyin haɗin gwiwa) waɗanda suka dace id
da .carousel
kashi.
Slides kawai
Anan ga carousel mai nunin faifai kawai. Yi la'akari da kasancewar .d-block
kuma .w-100
akan hotunan carousel don hana daidaitaccen hoton burauza.
<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>
Tare da sarrafawa
Ƙara a cikin abubuwan sarrafawa na baya da na gaba. Muna ba da shawarar yin amfani <button>
da abubuwa, amma kuma kuna iya amfani <a>
da abubuwa tare da 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>
Tare da alamomi
Hakanan zaka iya ƙara masu nuni zuwa carousel, tare da sarrafawa, ma.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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>
Tare da rubutun kalmomi
Ƙara taken magana a cikin nunin faifan ku cikin sauƙi tare da abin da .carousel-caption
ke cikin kowane .carousel-item
. Ana iya ɓoye su cikin sauƙi a kan ƙananan wuraren kallo, kamar yadda aka nuna a ƙasa, tare da kayan aikin nuni na zaɓi . Muna ɓoye su da farko tare .d-none
da dawo da su akan na'urori masu matsakaicin girma tare da .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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
Ƙara .carousel-fade
zuwa carousel ɗin ku zuwa nunin faifai mai rai tare da ɓata lokaci maimakon nunin faifai.
<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>
Tazarar mutum .carousel-item
ɗaya
Ƙara data-bs-interval=""
zuwa .carousel-item
don canza adadin lokacin jinkirta tsakanin yin keke ta atomatik zuwa abu na gaba.
<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>
Kashe taɓa taɓawa
Carousels suna goyan bayan swiping hagu/dama akan na'urorin allo don matsawa tsakanin nunin faifai. Ana iya kashe wannan ta amfani da data-bs-touch
sifa. Misalin da ke ƙasa kuma baya haɗa da data-bs-ride
sifa kuma yana da data-bs-interval="false"
don haka baya kunna kai tsaye.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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>
Bambancin duhu
Ƙara .carousel-dark
zuwa .carousel
don sarrafawa masu duhu, alamomi, da rubutun kalmomi. An juyar da sarrafawa daga farkon farin cikarsu tare da filter
kadarorin CSS. Kalmomi da sarrafawa suna da ƙarin masu canji na Sass waɗanda ke keɓancewa color
da 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>
Canjin al'ada
.carousel-item
Za'a iya canza tsawon lokacin miƙa mulki tare da $carousel-transition-duration
canjin Sass kafin haɗawa ko salo na al'ada idan kuna amfani da haɗakarwar CSS. Idan an yi amfani da sauye-sauye da yawa, tabbatar da an bayyana canjin canji da farko (misali transition: transform 2s ease, opacity .5s ease-out
).
Sass
Masu canji
$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`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Amfani
Ta hanyar bayanan halayen
Yi amfani da sifofin bayanai don sarrafa matsayin carousel cikin sauƙi. data-bs-slide
yana karɓar kalmomin maɓalli prev
ko next
, wanda ke canza matsayi na faifai dangane da matsayinsa na yanzu. A madadin, yi amfani data-bs-slide-to
da don ƙaddamar da ɗanyen fihirisar zamewa zuwa carousel data-bs-slide-to="2"
, wanda ke canza wurin zamewar zuwa wani fihirisar takamammen farawa da 0
.
Ana data-bs-ride="carousel"
amfani da sifa don yiwa carousel alama azaman mai rai wanda ya fara daga nauyin shafi. Idan baka yi amfani data-bs-ride="carousel"
da fara fara carousel ɗinka ba, dole ne ka fara da kanka. Ba za a iya amfani da shi a haɗe tare da (m kuma ba dole ba) bayyanannen farawar JavaScript na carousel iri ɗaya.
Ta hanyar JavaScript
Kira carousel da hannu tare da:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Zabuka
Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-bs-
, kamar a cikin data-bs-interval=""
.
Suna | Nau'in | Default | Bayani |
---|---|---|---|
interval |
lamba | 5000 |
Adadin lokacin jinkirta tsakanin yin keke ta atomatik abu. Idan false , carousel ba zai zagaya ta atomatik ba. |
keyboard |
boolean | true |
Ko carousel ya kamata ya mayar da martani ga abubuwan da suka faru na madannai. |
pause |
zaren | boolean | 'hover' |
Idan an saita zuwa A kan na'urori masu kunna taɓawa, lokacin da aka saita zuwa |
ride |
zaren | boolean | false |
Yana kunna carousel ta atomatik bayan mai amfani ya zagaya abu na farko da hannu. Idan an saita zuwa 'carousel' , yana kunna carousel ta atomatik akan lodi. |
wrap |
boolean | true |
Ko carousel ya kamata a ci gaba da zagayawa ko kuma yana da tasha. |
touch |
boolean | true |
Ko carousel ya kamata ya goyi bayan mu'amalar shuɗewar hagu/dama akan na'urorin allo. |
Hanyoyin
Hanyoyi masu daidaitawa da canji
Duk hanyoyin API ba daidai ba ne kuma suna fara canji . Suna komawa ga mai kiran da zarar an fara canji amma kafin ya ƙare . Bugu da ƙari, za a yi watsi da kiran hanya akan ɓangaren canji .
Kuna iya ƙirƙirar misalin carousel tare da maginin carousel, misali, don farawa tare da ƙarin zaɓuɓɓuka kuma fara hawan keke ta abubuwa:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Hanya | Bayani |
---|---|
cycle |
Yana zagayawa cikin abubuwan carousel daga hagu zuwa dama. |
pause |
Yana dakatar da carousel daga yin keke ta cikin abubuwa. |
prev |
Kewaya zuwa abu na baya. Komawa ga mai kira kafin a nuna abin da ya gabata (misali, kafin slid.bs.carousel abin ya faru). |
next |
Kewaya zuwa abu na gaba. Komawa ga mai kira kafin a nuna abu na gaba (misali, kafin slid.bs.carousel abin ya faru). |
nextWhenVisible |
Kar a sake zagayowar carousel zuwa gaba lokacin da ba a ganin shafin ko carousel ko iyayensa ba a iya gani. Komawa ga mai kira kafin a nuna abin da ake nufi |
to |
Yana zagayawa carousel zuwa wani firam na musamman (0 tushen, kama da tsararru). Komawa ga mai kira kafin a nuna abin da ake nufi (misali, kafin slid.bs.carousel abin ya faru). |
dispose |
Yana lalata carousel na wani abu. (Yana cire bayanan da aka adana akan ɓangaren DOM) |
getInstance |
Hanyar da ta dace wacce ke ba ku damar samun misalin carousel mai alaƙa da nau'in DOM, zaku iya amfani da shi kamar haka:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Hanya madaidaiciya wacce ke dawo da misalin carousel mai alaƙa da abun DOM ko ƙirƙirar sabo idan ba a fara shi ba. Kuna iya amfani da shi kamar haka:bootstrap.Carousel.getOrCreateInstance(element) |
Abubuwan da suka faru
Ajin carousel na Bootstrap yana fallasa abubuwa biyu don haɗawa cikin ayyukan carousel. Duk abubuwan biyu suna da ƙarin kaddarorin masu zuwa:
direction
: Hanyar da carousel ke zamewa (ko dai"left"
ko"right"
).relatedTarget
: Abubuwan DOM da ake zamewa cikin wuri azaman abu mai aiki.from
: Ma'anar abin da ke yanzuto
: Fihirisar abu na gaba
Duk abubuwan da suka faru na carousel ana harba su a kan carousel kanta (watau a <div class="carousel">
).
Nau'in taron | Bayani |
---|---|
slide.bs.carousel |
Gobara nan da nan lokacin da slide aka kira hanyar misali. |
slid.bs.carousel |
An kori lokacin da carousel ya gama canjin zamewar sa. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})