diff --git a/js/src/carousel.js b/js/src/carousel.js index 06a391419..fac1826dc 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -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,20 @@ 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 (parseInt(indicators[i].getAttribute('data-bs-slide-to')) === this._getItemIndex(element)) { + indicators[i].classList.add(CLASS_NAME_ACTIVE) + indicators[i].setAttribute('aria-current', 'true') + } } } } diff --git a/scss/_carousel.scss b/scss/_carousel.scss index d2e42bc10..fa2909276 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -147,10 +147,10 @@ background-image: escape-svg($carousel-control-next-icon-bg); } -// Optional indicator pips +// Optional indicator pips/controls // -// Add an ordered list with the following class and add a list item for each -// slide your carousel holds. +// Add an container (such as a list) with the following class and add an item (ideally a focusable control, +// like a button) with data-bs-target for each slide your carousel holds. .carousel-indicators { position: absolute; @@ -160,23 +160,26 @@ z-index: 2; display: flex; justify-content: center; - padding-left: 0; // override
    default + padding: 0; // Use the .carousel-control's width as margin so we don't overlay those margin-right: $carousel-control-width; margin-left: $carousel-control-width; + margin-bottom: 1rem; list-style: none; - li { + [data-bs-target] { box-sizing: content-box; flex: 0 1 auto; width: $carousel-indicator-width; height: $carousel-indicator-height; + padding: 0; margin-right: $carousel-indicator-spacer; margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; background-color: $carousel-indicator-active-bg; background-clip: padding-box; + border: 0; // Use transparent borders to increase the hit area by 10px on top and bottom. border-top: $carousel-indicator-hit-area-height solid transparent; border-bottom: $carousel-indicator-hit-area-height solid transparent; @@ -213,7 +216,7 @@ filter: $carousel-dark-control-icon-filter; } - .carousel-indicators li { + .carousel-indicators [data-bs-target] { background-color: $carousel-dark-indicator-active-bg; } diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 6aa9f614f..f97d35360 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -78,11 +78,11 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< example >}}