Carousel ya go swara
Karolo ya pontšho ya diselaete ya go sepela ka paesekele ka gare ga dielemente—diswantšho goba dilaete tša sengwalwa—go swana le carousel.
Kamoo e šomago ka gona
Carousel ke pontšho ya diselaete ya go sepela ka paesekele ka letoto la dikagare, yeo e agilwego ka diphetogo tša CSS 3D le go se nene ga JavaScript. E šoma ka lelokelelo la diswantšho, sengwalwa goba go swaya ga tlwaelo. E akaretša gape le thekgo ya ditaolo tša peleng/tše di latelago le ditšhupetšo.
Ka go diphensele moo API ya go Ponagala ga Letlakala e thekgwago, carousel e tla efoga go thelela ge letlakala la wepe le sa bonagale go modiriši (go swana le ge thepo ya sephephediši e sa šome, lefasetere la sephephediši le fokoditšwe, bjalobjalo).
prefers-reduced-motion
potšišo ya methopo ya ditaba. Bona
karolo ya tšhišinyego ye e fokoditšwego ya ditokomane tša rena tša phihlelelo .
Hle ela hloko gore di-carousel tše di tsentšwego ka gare ga dihlaga ga di thekgwe, gomme di-carousel ka kakaretšo ga di obamele maemo a phihlelelo.
Mohlala
Di-carousel ga di tlwaetše ka go iketla ditekanyo tša dia. Ka ge go le bjalo, o ka swanelwa ke go šomiša didirišwa tša tlaleletšo goba mekgwa ya tlwaelo go lekanyetša diteng ka tshwanelo. Le ge di-carousel di thekga ditaolo tša peleng/tše di latelago le ditšhupetšo, ga di nyakege ka go lebanya. Oketša le go tlwaetša ka moo o bonago go swanetše.
Tlelase .active
e hloka go okeletšwa go ye nngwe ya dilaete go sego bjalo carousel e ka se bonagale. Gape kgonthišetša gore o beakanya e kgethegilego id
go ya .carousel
bakeng sa ditaolo tša boikhethelo, kudu-kudu ge e ba o diriša di-carousel tše dintši letlakaleng le tee. Dielemente tša taolo le tša sešupo di swanetše go ba le data-bs-target
seka (goba href
sa dikgokagano) seo se swanago le id
sa .carousel
elemente.
Dilaete fela
Mona ke carousel e nang le di-slide feela. Hlokomela go ba gona ga .d-block
le .w-100
go diswantšho tša carousel go thibela go logaganya ga seswantšho sa go se fetoge sa sephephediši.
<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>
Ka ditaolo
Go tlaleletša ka go ditaolo tša go feta le tše di latelago. Re kgothaletša go šomiša <button>
dielemente, eupša o ka šomiša gape le <a>
dielemente ka 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>
Ka ditshupo
O ka boela wa tlaleletša ka ditšhupetšo go carousel, go bapa le ditaolo, le tšona.
<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>
Ka ditlhaloso tša ditlhalošo
Oketša ditlhalošo go dilaete tša gago gabonolo ka .carousel-caption
elemente ka gare ga efe goba efe .carousel-item
. Di ka utollwa gabonolo go di-viewport tše dinyenyane, bjalo ka ge go bontšhitšwe ka mo tlase, ka didirišwa tša pontšho tša boikhethelo . Re di uta mathomong ka .d-none
gomme re di bušetša morago go didirišwa tša bogolo bja magareng ka .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 ya go selaganya
Oketša .carousel-fade
go carousel ya gago go phediša dilaete ka phetogo ya go fifala go e na le selaete.
<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
Sekgao sa motho ka mong
Oketša data-bs-interval=""
go a .carousel-item
go fetoša nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela go ya go selo se se latelago.
<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>
Thibela go swipa ka go kgoma
Di-carousel di thekga go swipa ka go le letshadi/go le letona go didirišwa tša skrine sa go kgoma go sepela magareng ga diselaete. Se se ka šitišwa ka go šomiša data-bs-touch
seka. Mohlala wo o lego ka mo tlase gape ga o akaretše data-bs-ride
seka gomme o na le data-bs-interval="false"
ka fao ga o bapale ka go itiragalela.
<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>
Lefifi fapaneng
Oketša .carousel-dark
go ya .carousel
bakeng sa ditaolo tše lefsifsi, ditšhupetšo, le ditlhalošo. Ditaolo di fetotšwe go tšwa go tlatša ya tšona ya go se fetoge ye tšhweu ka filter
thepa ya CSS. Ditlhalošo le ditaolo di na le diphetogo tša tlaleletšo tša Sass tšeo di tlwaetšago color
le 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>
Phetogo ya tlwaelo
Nako ya phetogo ya e .carousel-item
ka fetolwa ka $carousel-transition-duration
phetogo ya Sass pele ga go kgoboketša goba mekgwa ya tlwaelo ge e le gore o šomiša CSS ye e kgobokeditšwego. Ge e le gore diphetogo tše ntši di dirišwa, kgonthiša gore phetogo ya phetogo e hlalošitšwe pele (mohlala. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Diphetogo
$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);
Tšhomišo
Ka dika ya data
Diriša dika tša data go laola gabonolo boemo bja carousel. data-bs-slide
e amogela mantšu a bohlokwa prev
goba next
, yeo e fetošago maemo a selaete ge e bapetšwa le maemo a yona a bjale. Ka go fapana le moo, šomiša data-bs-slide-to
go fetiša tšhupamabaka ya selaete ye tala go carousel data-bs-slide-to="2"
, yeo e fetošago boemo bja selaete go tšhupamabaka ye e itšego yeo e thomago ka 0
.
Sebopego data-bs-ride="carousel"
se šomišwa go swaya carousel bjalo ka go phela go thoma ka go rwala letlakala. Ge o sa šomiše data-bs-ride="carousel"
go thoma carousel ya gago, o swanetše go e thoma ka bowena. E ka se šomišwe ka kopanyo le (go sa nyakege le mo go sa nyakegego) go thoma ga JavaScript mo go lego molaleng ga carousel e swanago.
Ka JavaScript
Bitsa carousel ka letsoho le:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Dikgetho
Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-bs-
, bjalo ka go data-bs-interval=""
.
Leina | Mohuta | Hlokomologa | Tlhalošo |
---|---|---|---|
interval |
nomoro | 5000 |
Palo ya nako ya go diega magareng ga go sepela ka paesekele ka go itiragalela selo. If false , carousel ke ke ka tsela e iketsang paesekele. |
keyboard |
boolean ya go swana | true |
Gore na carousel e swanetše go arabela ditiragalong tša khiiboto. |
pause |
thapo ya | boolean ya go swana | 'hover' |
Ge e beakantšwe go Go didirišwa tšeo di kgontšhitšwego go kgoma, ge di beakantšwe go |
ride |
thapo ya | boolean ya go swana | false |
Autoplays carousel ka mor'a hore mosebedisi ka letsoho potoloha ntho ea pele. Ge e ba e beakantšwe go 'carousel' , e bapala ka go itiragalela carousel ka mošomo. |
wrap |
boolean ya go swana | true |
Gore na carousel e swanetše go sepela ka paesekele ka mo go tšwelago pele goba e be le mafelo a thata a go ema. |
touch |
boolean ya go swana | true |
Gore na carousel e swanetše go thekga ditirišano tša go swipa ka go le letshadi / go le letona go didirišwa tša touchscreen. |
Mekgwa ya go šoma
Mekgwa ya asynchronous le diphetogo
Mekgwa ka moka ya API ga e na asynchronous gomme e thoma phetogo . Ba boela go motho yo a leletšago mogala gateetee ge phetogo e thomilwe eupša pele e fela . Go tlaleletša, pitšo ya mokgwa go karolo ya phetogo e tla hlokomologwa .
Bona ditokomane tša rena tša JavaScript bakeng sa tshedimošo e oketšegilego .
O ka hlama mohlala wa carousel ka mohlami wa carousel, mohlala, go thoma ka dikgetho tša tlaleletšo gomme wa thoma go sepela ka paesekele ka dilo:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Mokgwa | Tlhalošo |
---|---|
cycle |
Didikologa ka dilo tša carousel go tloga go le letshadi go ya go le letona. |
pause |
E thibela carousel go sepela ka dipaesekele ka dilo. |
prev |
Didikologo go ya go selo sa go feta. E boela go mogala pele ga ge selo sa peleng se bontšhitšwe (mohlala, pele ga ge slid.bs.carousel tiragalo e direga). |
next |
Didikologo go ya go selo se se latelago. E boela go mogala pele ga ge selo se se latelago se bontšhitšwe (mohlala, pele ga ge slid.bs.carousel tiragalo e direga). |
nextWhenVisible |
O se ke wa sepela ka paesekele ya carousel go ya go e latelago ge letlakala le sa bonagale goba carousel goba motswadi wa yona a sa bonagale. E boela go mogala pele ga ge selo seo se nepišitšwego se bontšhitšwe |
to |
Cycles carousel ho foreime e itseng (0 e thehiloeng, e tšoanang le hlophisitsoeng). E boela go mogala pele ga ge selo seo se nepišitšwego se bontšhitšwe (mohlala, pele ga ge slid.bs.carousel tiragalo e direga). |
dispose |
E senya carousel ya elemente. (E tloša ya data ye e bolokilwego go elemente ya DOM) |
getInstance |
Mokgwa wa go se fetoge wo o go dumelelago go hwetša mohlala wa carousel wo o amanago le elemente ya DOM, o ka e šomiša ka tsela ye:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Mokgwa wa go se fetoge wo o bušetšago mohlala wa carousel wo o amanago le elemente ya DOM goba go hlama ye mpsha ge go ka direga gore e se ya thongwa. O ka e diriša ka tsela ye:bootstrap.Carousel.getOrCreateInstance(element) |
Ditiragalo
Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša mošomong wa carousel. Ditiragalo tše ka bobedi di na le dithoto tše di latelago tša tlaleletšo:
direction
: Tsela yeo carousel e thelelago ka yona (e ka ba"left"
goba"right"
).relatedTarget
: Elemente ya DOM yeo e thelelago lefelong bjalo ka selo se se šomago.from
: Tšhupetšo ya selo sa bjaleto
: Tšhupetšo ya selo se se latelago
Ditiragalo ka moka tša carousel di thuntšhwa go carousel ka boyona (ke gore go <div class="carousel">
).
Mohuta wa tiragalo | Tlhalošo |
---|---|
slide.bs.carousel |
E thunya ka pela ge slide mokgwa wa mohlala o bitšwa. |
slid.bs.carousel |
E thuntšhwa ge carousel e phethile phetogo ya yona ya go thelela. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})