diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 787a276de4..6c98f20d1d 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1154,7 +1154,7 @@ describe('Carousel', () => { expect(Carousel.getInstance(carouselEl)).toBeDefined() }) - it('should create carousel and go to the next slide on click', done => { + it('should create carousel and go to the next slide on click (with real button controls)', done => { fixtureEl.innerHTML = [ '', + '' + ].join('') + + const next = fixtureEl.querySelector('#next') + const item2 = fixtureEl.querySelector('#item2') + + next.click() + + setTimeout(() => { + expect(item2.classList.contains('active')).toEqual(true) + done() + }, 10) + }) + + it('should create carousel and go to the next slide on click (using links as controls)', done => { + fixtureEl.innerHTML = [ + ' + diff --git a/scss/_carousel.scss b/scss/_carousel.scss index d2e42bc10b..d9ff7e5352 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -98,8 +98,11 @@ align-items: center; // 2. vertically center contents justify-content: center; // 3. horizontally center contents width: $carousel-control-width; + padding: 0; color: $carousel-control-color; text-align: center; + background: none; + border: 0; opacity: $carousel-control-opacity; @include transition($carousel-control-transition); diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 49bb0f9bf1..bee325bb48 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -22,7 +22,7 @@ Please be aware that nested carousels are not supported, and carousels are gener Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. -**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique id on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the id of the `.carousel` element. +**The `.active` class needs to be added to one of the slides** otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element. ### Slides only @@ -46,7 +46,7 @@ Here's a carousel with slides only. Note the presence of the `.d-block` and `.w- ### With controls -Adding in the previous and next controls: +Adding in the previous and next controls. We recommend using ` + {{< /example >}} @@ -94,14 +94,14 @@ You can also add the indicators to the carousel, alongside the controls, too. {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} @@ -139,14 +139,14 @@ Add captions to your slides easily with the `.carousel-caption` element within a - + + {{< /example >}} @@ -167,14 +167,14 @@ Add `.carousel-fade` to your carousel to animate slides with a fade transition i {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} @@ -195,14 +195,14 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} @@ -223,14 +223,14 @@ Carousels support swiping left/right on touchscreen devices to move between slid {{< placeholder width="800" height="400" class="bd-placeholder-img-lg d-block w-100" color="#333" background="#555" text="Third slide" >}} - + + {{< /example >}} @@ -268,14 +268,14 @@ Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and cap - + + {{< /example >}} diff --git a/site/content/docs/5.0/examples/carousel-rtl/index.html b/site/content/docs/5.0/examples/carousel-rtl/index.html index def1abde8a..30e7876f82 100644 --- a/site/content/docs/5.0/examples/carousel-rtl/index.html +++ b/site/content/docs/5.0/examples/carousel-rtl/index.html @@ -74,14 +74,14 @@ extra_css: - + + diff --git a/site/content/docs/5.0/examples/carousel/index.html b/site/content/docs/5.0/examples/carousel/index.html index 2c0bc51295..d9d9f702b6 100644 --- a/site/content/docs/5.0/examples/carousel/index.html +++ b/site/content/docs/5.0/examples/carousel/index.html @@ -73,14 +73,14 @@ extra_css: - + +