Carousel
Igice cya sisitemu yo gusiganwa ku magare binyuze mu bintu - amashusho cyangwa amashusho yinyandiko - nka karuseli.
Uburyo ikora
Carousel ni slide yo gusiganwa ku magare binyuze mu ruhererekane rw'ibirimo, yubatswe na CSS 3D ihindura hamwe na JavaScript. Ikorana nuruhererekane rwamashusho, inyandiko, cyangwa ikimenyetso cyihariye. Harimo kandi inkunga kubanza / ubutaha kugenzura n'ibipimo.
Mucukumbuzi aho Page Visibility API ishyigikiwe, karuseli izirinda kunyerera mugihe urubuga rutagaragara kubakoresha (nkigihe iyo tab ya mushakisha idakora, idirishya rya mushakisha ryaragabanutse, nibindi).
prefers-reduced-motion
nibibazo byitangazamakuru. Reba igice
cyagabanijwe cyicyiciro cyibisobanuro byacu .
Nyamuneka umenye ko karuseli yatewe idashyigikiwe, kandi karuseli muri rusange ntabwo yujuje ubuziranenge bwo kugerwaho.
Urugero
Carousels ntabwo ihita isanzwe ibipimo bya slide. Nkibyo, urashobora gukenera gukoresha ibikorwa byingirakamaro cyangwa uburyo bwihariye kugirango ubone ubunini bukwiye. Mugihe karuseli ishyigikira ibyabanje / ubutaha kugenzura n'ibipimo, ntabwo bisabwa neza. Ongeraho kandi uhindure uko ubishaka.
Icyiciro .active
gikeneye kongerwaho kamwe mumashusho ubundi karuseli ntizagaragara. Wemeze kandi gushiraho umwihariko id
kuri .carousel
kugenzura kubushake, cyane cyane niba ukoresha karuseli nyinshi kurupapuro rumwe. Kugenzura no kwerekana ibipimo bigomba kugira data-bs-target
ikiranga (cyangwa href
kubihuza) bihuye id
nibintu .carousel
.
Igice gusa
Hano karuseli ifite amashusho gusa. Reba ahari ibishusho bya .d-block
karuseli .w-100
kugirango wirinde gushakisha amashusho adasanzwe.
<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>
Nubugenzuzi
Ongeraho mubibanziriza nubutaha. Turasaba gukoresha <button>
ibintu, ariko urashobora kandi gukoresha <a>
ibintu hamwe 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>
Hamwe n'ibipimo
Urashobora kandi kongeramo ibipimo kuri karuseli, hamwe nubugenzuzi, nabwo.
<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>
Hamwe n'amagambo yanditseho
Ongeraho ibisobanuro kuri slide yawe byoroshye hamwe .carousel-caption
nibintu muri byose .carousel-item
. Birashobora guhishwa byoroshye kubireba bito, nkuko bigaragara hano hepfo, hamwe nibikorwa byingirakamaro . Turabahisha ubanza hamwe .d-none
no kubagarura kubikoresho biciriritse hamwe .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>
Kwambukiranya
Ongera .carousel-fade
kuri karuseli yawe kugirango ushushanye amashusho hamwe ninzibacyuho yazimye aho kuba slide.
<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>
.carousel-item
Intera ya buri muntu
Ongeraho data-bs-interval=""
a .carousel-item
kugirango uhindure igihe cyo gutinda hagati yamagare ahita yikurikiranya.
<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>
Hagarika gukorakora
Carousels ishyigikira guhanagura ibumoso / iburyo kubikoresho bya touchscreen kugirango yimuke hagati ya slide. Ibi birashobora guhagarikwa ukoresheje data-bs-touch
ikiranga. Urugero rukurikira narwo ntirurimo data-bs-ride
ikiranga kandi rufite data-bs-interval="false"
kugirango rudakora autoplay.
<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>
Impinduka zijimye
Ongeraho kumwijima .carousel-dark
kugenzura .carousel
, ibipimo, hamwe nibisobanuro. Igenzura ryahinduwe uhereye kubisanzwe byera byuzuza filter
umutungo wa CSS. Ibisobanuro hamwe nubugenzuzi bifite Sass yinyongera ihindura i color
na 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>
Inzibacyuho
Igihe cyinzibacyuho .carousel-item
gishobora guhinduka hamwe na $carousel-transition-duration
Sass ihinduka mbere yo gukusanya cyangwa uburyo bwihariye niba ukoresha CSS yakozwe. Niba inzibacyuho nyinshi zashyizwe mu bikorwa, menya neza ko impinduka zasobanuwe mbere (urugero. transition: transform 2s ease, opacity .5s ease-out
)
Sass
Ibihinduka
$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);
Ikoreshwa
Binyuze mu biranga amakuru
Koresha ibiranga amakuru kugirango ugenzure byoroshye umwanya wa karuseli. data-bs-slide
yemera ijambo ryibanze prev
cyangwa next
, rihindura umwanya uhagaze ugereranije nubu. Ubundi, koresha data-bs-slide-to
kunyuza urutonde rwibanze kuri karuseli data-bs-slide-to="2"
, ihinduranya umwanya uhagaze kumurongo runaka utangirana na 0
.
Ikiranga data-bs-ride="carousel"
gikoreshwa mukuranga karuseli nka animasiyo itangirira kurupapuro. Niba udakoresha data-bs-ride="carousel"
gutangiza karuseli yawe, ugomba kuyitangiza wenyine. Ntishobora gukoreshwa ifatanije na (kurenza kandi bitari ngombwa) JavaScript itangizwa ya karuseli imwe.
Binyuze kuri JavaScript
Hamagara karuseli intoki hamwe na:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Amahitamo
Amahitamo arashobora kunyuzwa kumurongo wamakuru cyangwa JavaScript. Kubiranga Ibyatanzwe, Ongeraho Ihitamo Izina Kuri data-bs-
, Nka Muri data-bs-interval=""
.
Izina | Andika | Mburabuzi | Ibisobanuro |
---|---|---|---|
interval |
umubare | 5000 |
Ingano yigihe cyo gutinda hagati yizunguruka yikintu. Niba false , karuseli ntabwo izahita izunguruka. |
keyboard |
boolean | true |
Niba karuseli igomba kwitwara kubyabaye kuri clavier. |
pause |
umugozi | boolean | 'hover' |
Niba byashyizweho Ku bikoresho bifasha gukoraho, mugihe byashizweho |
ride |
umugozi | boolean | false |
Autoplays karuseli nyuma yumukoresha intoki azunguruka ikintu cya mbere. Niba byashyizweho 'carousel' , autoplays karuseli kumuzigo. |
wrap |
boolean | true |
Niba karuseli igomba kuzunguruka ubudasiba cyangwa ifite guhagarara gukomeye. |
touch |
boolean | true |
Niba karuseli igomba gushyigikira ibumoso / iburyo bwo guhanagura ibikoresho bya ecran ya ecran. |
Uburyo
Uburyo butajegajega ninzibacyuho
Inzira zose za API ntizihuza kandi zitangira inzibacyuho . Basubira kumuhamagara mugihe inzibacyuho itangiye ariko itararangira . Mubyongeyeho, uburyo bwo guhamagarira ibice byinzibacyuho bizirengagizwa .
Urashobora gukora karuseli urugero hamwe na karuseli yubaka, kurugero, kugirango utangire amahitamo yinyongera hanyuma utangire gusiganwa ku magare ukoresheje ibintu:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Uburyo | Ibisobanuro |
---|---|
cycle |
Amagare anyuze muri karuseli kuva ibumoso ugana iburyo. |
pause |
Hagarika karuseli gusiganwa ku magare binyuze mu bintu. |
prev |
Amagare ku kintu kibanziriza iki. Garuka kumuhamagara mbere yikintu cyabanjirije cyerekanwe (urugero, mbere yuko slid.bs.carousel ibyabaye biba). |
next |
Amagare ku kintu gikurikira. Garuka kumuhamagara mbere yikintu gikurikira cyerekanwe (urugero, mbere yuko slid.bs.carousel ibyabaye biba). |
nextWhenVisible |
Ntukazenguruke karuseli kurikurikira mugihe page itagaragara cyangwa karuseli cyangwa umubyeyi wacyo ntabwo igaragara. Garuka kumuhamagara mbere yuko intego yerekanwe |
to |
Kuzenguruka karuseli kumurongo runaka (0 ishingiye, isa na array). Garuka kumuhamagara mbere yikintu cyerekanwe (urugero, mbere yuko slid.bs.carousel ibyabaye biba). |
dispose |
Gusenya ikintu cya karuseli. (Kuraho amakuru yabitswe kubintu bya DOM) |
getInstance |
Uburyo buhamye butuma ubona urugero rwa karuseli ijyanye nibintu bya DOM, urashobora kuyikoresha gutya:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Uburyo buhagaze busubiza karuseli urugero rujyanye nibintu bya DOM cyangwa gukora bundi bushya mugihe bitatangijwe. Urashobora kuyikoresha gutya:bootstrap.Carousel.getOrCreateInstance(element) |
Ibyabaye
Bootstrap ya karuseli yerekana ibintu bibiri byo guhuza imikorere ya karuseli. Ibyabaye byombi bifite imitungo yinyongera ikurikira:
direction
: Icyerekezo karuseli iranyerera (haba"left"
cyangwa"right"
).relatedTarget
: Ikintu cya DOM kirimo kunyerera ahantu nkibintu bikora.from
: Ironderero ryikintu kirihoto
: Ironderero ryikintu gikurikira
Ibintu byose bya karuseli birasa kuri karuseli ubwayo (ni ukuvuga kuri <div class="carousel">
).
Ubwoko bwibyabaye | Ibisobanuro |
---|---|
slide.bs.carousel |
Umuriro uhita iyo uburyo slide bwurugero bwasabwe. |
slid.bs.carousel |
Umuriro iyo karuseli yarangije kunyerera. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})