mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00
Code Issues Releases Wiki Activity

Make carousel indicators actual buttons

Browse Source
This commit is contained in:
Patrick H. Lauke
2021-01-03 13:06:58 +02:00
committed by XhmikosR
parent 1fd34a1a2c
commit a882614c45
9 changed files with 70 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
js/src/carousel.js
View File

@@ -90,6 +90,7 @@ const SELECTOR_ITEM = '.carousel-item'
const SELECTOR_ITEM_IMG = '.carousel-item img'
const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
const SELECTOR_INDICATORS = '.carousel-indicators'
const SELECTOR_INDICATOR = '[data-bs-target]'
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
@@ -405,18 +406,21 @@ class Carousel extends BaseComponent {
_setActiveIndicatorElement(element) {
if (this._indicatorsElement) {
const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
const activeIndicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
for (let i = 0; i < indicators.length; i++) {
indicators[i].classList.remove(CLASS_NAME_ACTIVE)
for (let i = 0; i < activeIndicators.length; i++) {
activeIndicators[i].classList.remove(CLASS_NAME_ACTIVE)
activeIndicators[i].removeAttribute('aria-current')
}
const nextIndicator = this._indicatorsElement.children[
this._getItemIndex(element)
]
const indicators = SelectorEngine.find(SELECTOR_INDICATOR, this._indicatorsElement)
if (nextIndicator) {
nextIndicator.classList.add(CLASS_NAME_ACTIVE)
for (let i = 0; i < indicators.length; i++) {
if (Number.parseInt(indicators[i].getAttribute('data-bs-slide-to'), 10) === this._getItemIndex(element)) {
indicators[i].classList.add(CLASS_NAME_ACTIVE)
indicators[i].setAttribute('aria-current', 'true')
break
}
}
}
}

10
js/tests/integration/index.html
View File

@@ -20,11 +20,11 @@
</button>
<div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" 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">

14
js/tests/unit/carousel.spec.js
View File

@@ -659,11 +659,11 @@ describe('Carousel', () => {
it('should update indicators if present', done => {
fixtureEl.innerHTML = [
'<div id="myCarousel" class="carousel slide">',
' <ol class="carousel-indicators">',
' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>',
' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>',
' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>',
' </ol>',
' <div class="carousel-indicators">',
' <button type="button" id="firstIndicator" data-bs-target="myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>',
' <button type="button" id="secondIndicator" data-bs-target="myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>',
' <button type="button" data-bs-target="myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>',
' </div>',
' <div class="carousel-inner">',
' <div class="carousel-item active">item 1</div>',
' <div class="carousel-item" data-bs-interval="7">item 2</div>',
@@ -673,11 +673,15 @@ describe('Carousel', () => {
].join('')
const carouselEl = fixtureEl.querySelector('#myCarousel')
const firstIndicator = fixtureEl.querySelector('#firstIndicator')
const secondIndicator = fixtureEl.querySelector('#secondIndicator')
const carousel = new Carousel(carouselEl)
carouselEl.addEventListener('slid.bs.carousel', () => {
expect(firstIndicator.classList.contains('active')).toEqual(false)
expect(firstIndicator.hasAttribute('aria-current')).toEqual(false)
expect(secondIndicator.classList.contains('active')).toEqual(true)
expect(secondIndicator.getAttribute('aria-current')).toEqual('true')
done()
})

10
js/tests/visual/carousel.html
View File

@@ -18,11 +18,11 @@
<p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
<div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li>
<li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-indicators">
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carousel-example-generic" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide">