rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make carousel indicators actual buttons

Browse source
This commit is contained in:
Patrick H. Lauke 2021-01-03 11:06:58 +00:00
parent b05145c951
commit a63a459e4f
3 changed files with 35 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

19
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,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')
}
}
}
}

15
scss/_carousel.scss
View file

@ -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 <ol> 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;
}

30
site/content/docs/5.0/components/carousel.md
View file

@ -78,11 +78,11 @@ You can also add the indicators to the carousel, alongside the controls, too.
{{< example >}}
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-indicators">
<button data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
<button data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@ -111,11 +111,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
{{< example >}}
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-indicators">
<button data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
<button data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
@ -240,11 +240,11 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap
{{< example >}}
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-indicators">
<button data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-label="Slide 1"></button>
<button data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#aaa" background="#f5f5f5" text="First slide" >}}