Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make carousel indicators actual buttons #32661

Merged
merged 3 commits into from Jan 28, 2021
Merged

Make carousel indicators actual buttons #32661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3de29f
Make carousel indicators actual buttons
patrickhlauke Jan 3, 2021
be40c85
Just find the active indicator
rohit2sharma95 Jan 18, 2021
6c0af73
Merge branch 'main' into patrickhlauke-carousel-indicators
patrickhlauke Jan 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 11 additions & 9 deletions js/src/carousel.js
View file
Open in desktop
Expand Up @@ -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"]'

Expand Down Expand Up @@ -405,18 +406,19 @@ class Carousel extends BaseComponent {

_setActiveIndicatorElement(element) {
if (this._indicatorsElement) {
const indicators = SelectorEngine.find(SELECTOR_ACTIVE, this._indicatorsElement)
const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement)

for (let i = 0; i < indicators.length; i++) {
indicators[i].classList.remove(CLASS_NAME_ACTIVE)
}
activeIndicator.classList.remove(CLASS_NAME_ACTIVE)
activeIndicator.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
}
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions js/tests/integration/index.html
View file
Open in desktop
Expand Up @@ -20,11 +20,11 @@ <h1>Hello, world!</h1>
</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">
Expand Down
14 changes: 9 additions & 5 deletions js/tests/unit/carousel.spec.js
View file
Open in desktop
Expand Up @@ -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>',
Expand All @@ -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()
})

Expand Down
10 changes: 5 additions & 5 deletions js/tests/visual/carousel.html
View file
Open in desktop
Expand Up @@ -18,11 +18,11 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
<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">
Expand Down
15 changes: 9 additions & 6 deletions scss/_carousel.scss
View file
Open in desktop
Expand Up @@ -150,10 +150,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;
Expand All @@ -163,23 +163,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-bottom: 1rem;
margin-left: $carousel-control-width;
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;
Expand Down Expand Up @@ -216,7 +219,7 @@
filter: $carousel-dark-control-icon-filter;
}

.carousel-indicators li {
.carousel-indicators [data-bs-target] {
background-color: $carousel-dark-indicator-active-bg;
}

Expand Down
30 changes: 15 additions & 15 deletions site/content/docs/5.0/components/carousel.md
View file
Open in desktop
Expand Up @@ -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 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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
Expand Down Expand Up @@ -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 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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="First slide" >}}
Expand Down Expand Up @@ -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 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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#aaa" background="#f5f5f5" text="First slide" >}}
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.0/examples/carousel-rtl/index.html
View file
Open in desktop
Expand Up @@ -37,11 +37,11 @@
<main>

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li 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" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" 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">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.0/examples/carousel/index.html
View file
Open in desktop
Expand Up @@ -36,11 +36,11 @@
<main>

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li 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" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" 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">
{{< placeholder width="100%" height="100%" background="#777" color="#777" text="false" title="false" >}}
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.0/examples/cheatsheet-rtl/index.html
View file
Open in desktop
Expand Up @@ -862,11 +862,11 @@ <h3>شرائح عرض</h3>
<div>
{{< example show_markup="false" >}}
<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 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">
{{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#555" background="#777" text="الشريحة الأولى" >}}
Expand Down