Carwsél
Elfen sioe sleidiau ar gyfer beicio trwy elfennau - delweddau neu sleidiau o destun - fel carwsél.
Sut mae'n gweithio
Mae'r carwsél yn sioe sleidiau ar gyfer beicio trwy gyfres o gynnwys, wedi'i adeiladu gyda thrawsnewidiadau CSS 3D ac ychydig o JavaScript. Mae'n gweithio gyda chyfres o ddelweddau, testun, neu farcio personol. Mae hefyd yn cynnwys cefnogaeth ar gyfer rheolaethau a dangosyddion blaenorol/nesaf.
Mewn porwyr lle mae'r API Gwelededd Tudalen yn cael ei gefnogi, bydd y carwsél yn osgoi llithro pan nad yw'r dudalen we yn weladwy i'r defnyddiwr (fel pan fydd tab y porwr yn anactif, ffenestr y porwr yn cael ei lleihau, ac ati).
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Sylwch nad yw carwsél nythu yn cael eu cynnal, ac yn gyffredinol nid yw carwsél yn cydymffurfio â safonau hygyrchedd.
Enghraifft
Nid yw carwsél yn normaleiddio dimensiynau sleidiau yn awtomatig. O'r herwydd, efallai y bydd angen i chi ddefnyddio cyfleustodau ychwanegol neu arddulliau arferol i faint cynnwys priodol. Er bod carwsél yn cefnogi rheolaethau a dangosyddion blaenorol/nesaf, nid oes eu hangen yn benodol. Ychwanegu ac addasu fel y gwelwch yn dda.
Mae .active
angen ychwanegu'r dosbarth at un o'r sleidiau neu ni fydd y carwsél yn weladwy. Hefyd gwnewch yn siŵr eich bod chi'n gosod unigryw id
ar y .carousel
rheolyddion dewisol, yn enwedig os ydych chi'n defnyddio carwsél lluosog ar un dudalen. Rhaid i elfennau rheoli a dangosydd gael data-bs-target
priodoledd (neu href
ar gyfer dolenni) sy'n cyfateb i nodwedd id
yr .carousel
elfen.
Sleidiau yn unig
Dyma garwsél gyda sleidiau yn unig. Sylwch ar bresenoldeb y delweddau carwsél .d-block
ac .w-100
arnynt i atal aliniad delwedd rhagosodedig y porwr.
<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>
Gyda rheolyddion
Ychwanegu rheolaethau blaenorol a nesaf i mewn. Rydym yn argymell defnyddio <button>
elfennau, ond gallwch hefyd ddefnyddio <a>
elfennau gyda 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>
Gyda dangosyddion
Gallwch hefyd ychwanegu'r dangosyddion at y carwsél, ochr yn ochr â'r rheolyddion, hefyd.
<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>
Gyda chapsiynau
Ychwanegwch gapsiynau i'ch sleidiau yn hawdd gyda'r .carousel-caption
elfen o fewn unrhyw .carousel-item
. Gellir eu cuddio'n hawdd ar fannau gwylio llai, fel y dangosir isod, gyda chyfleustodau arddangos dewisol . Rydyn ni'n eu cuddio i ddechrau gyda nhw .d-none
ac yn dod â nhw yn ôl ar ddyfeisiau maint canolig gyda .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>
Croesfade
Ychwanegwch .carousel-fade
at eich carwsél i animeiddio sleidiau gyda thrawsnewidiad pylu yn lle sleid.
<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
Cyfwng unigol
Ychwanegu data-bs-interval=""
at a .carousel-item
i newid faint o amser i oedi rhwng beicio'n awtomatig i'r eitem nesaf.
<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>
Analluogi swiping cyffwrdd
Mae carwsél yn cefnogi troi i'r chwith / dde ar ddyfeisiau sgrin gyffwrdd i symud rhwng sleidiau. Gellir analluogi hyn gan ddefnyddio'r data-bs-touch
briodwedd. Nid yw'r enghraifft isod ychwaith yn cynnwys y data-bs-ride
priodoledd ac data-bs-interval="false"
felly nid yw'n chwarae'n awtomatig.
<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>
Amrywiad tywyll
Ychwanegu .carousel-dark
at y .carousel
rheolyddion, dangosyddion a chapsiynau tywyllach. Mae rheolyddion wedi'u gwrthdroi o'u llenwad gwyn diofyn gyda'r filter
eiddo CSS. Mae gan gapsiynau a rheolaethau newidynnau Sass ychwanegol sy'n addasu'r color
a 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>
Trawsnewid personol
Gellir newid hyd y trawsnewid .carousel-item
gyda'r $carousel-transition-duration
newidyn Sass cyn llunio neu arddulliau arferol os ydych chi'n defnyddio'r CSS a luniwyd. Os cymhwysir trawsnewidiadau lluosog, gwnewch yn siŵr bod y trawsnewid trawsnewid yn cael ei ddiffinio yn gyntaf (ee. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Newidynnau
$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);
Defnydd
Trwy briodoleddau data
Use data attributes to easily control the position of the carousel. data-bs-slide
accepts the keywords prev
or next
, which alters the slide position relative to its current position. Alternatively, use data-bs-slide-to
to pass a raw slide index to the carousel data-bs-slide-to="2"
, which shifts the slide position to a particular index beginning with 0
.
The data-bs-ride="carousel"
attribute is used to mark a carousel as animating starting at page load. If you don’t use data-bs-ride="carousel"
to initialize your carousel, you have to initialize it yourself. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.
Via JavaScript
Call carousel manually with:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-
, as in data-bs-interval=""
.
Name | Type | Default | Description |
---|---|---|---|
interval |
number | 5000 |
The amount of time to delay between automatically cycling an item. If false , carousel will not automatically cycle. |
keyboard |
boolean | true |
Whether the carousel should react to keyboard events. |
pause |
string | boolean | 'hover' |
If set to On touch-enabled devices, when set to |
ride |
string | boolean | false |
Autoplays the carousel after the user manually cycles the first item. If set to 'carousel' , autoplays the carousel on load. |
wrap |
boolean | true |
Whether the carousel should cycle continuously or have hard stops. |
touch |
boolean | true |
Whether the carousel should support left/right swipe interactions on touchscreen devices. |
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Method | Description |
---|---|
cycle |
Cycles through the carousel items from left to right. |
pause |
Stops the carousel from cycling through items. |
prev |
Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the slid.bs.carousel event occurs). |
next |
Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the slid.bs.carousel event occurs). |
nextWhenVisible |
Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown |
to |
Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the slid.bs.carousel event occurs). |
dispose |
Destroys an element's carousel. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised. You can use it like this: bootstrap.Carousel.getOrCreateInstance(element) |
Events
Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
direction
: The direction in which the carousel is sliding (either"left"
or"right"
).relatedTarget
: The DOM element that is being slid into place as the active item.from
: The index of the current itemto
: The index of the next item
All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">
).
Event type | Description |
---|---|
slide.bs.carousel |
Fires immediately when the slide instance method is invoked. |
slid.bs.carousel |
Fired when the carousel has completed its slide transition. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})