diff options
| -rw-r--r-- | js/src/carousel.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/carousel.spec.js | 14 | ||||
| -rw-r--r-- | site/content/docs/5.2/components/carousel.md | 6 |
3 files changed, 11 insertions, 11 deletions
diff --git a/js/src/carousel.js b/js/src/carousel.js index b23a85b96..5f2f6342e 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -78,7 +78,7 @@ const Default = { } const DefaultType = { - interval: '(number|boolean)', + interval: '(number|boolean)', // TODO:v6 remove boolean support keyboard: 'boolean', pause: '(string|boolean)', ride: '(boolean|string)', diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 7f8aea74a..d951bd5ae 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -406,7 +406,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-bs-interval="false">', + '<div class="carousel">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -453,7 +453,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-bs-interval="false">', + '<div class="carousel">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -495,7 +495,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = noop fixtureEl.innerHTML = [ - '<div class="carousel" data-bs-interval="false">', + '<div class="carousel">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -536,7 +536,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = noop fixtureEl.innerHTML = [ - '<div class="carousel" data-bs-interval="false">', + '<div class="carousel">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -578,7 +578,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = noop fixtureEl.innerHTML = [ - '<div class="carousel" data-bs-interval="false">', + '<div class="carousel">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -622,7 +622,7 @@ describe('Carousel', () => { clearPointerEvents() document.documentElement.ontouchstart = noop - fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>' + fixtureEl.innerHTML = '<div class="carousel"></div>' const carouselEl = fixtureEl.querySelector('.carousel') const carousel = new Carousel(carouselEl) @@ -910,7 +910,7 @@ describe('Carousel', () => { it('should not call next when the page is not visible', () => { fixtureEl.innerHTML = [ '<div style="display: none;">', - ' <div class="carousel" data-bs-interval="false"></div>', + ' <div class="carousel"></div>', '</div>' ].join('') diff --git a/site/content/docs/5.2/components/carousel.md b/site/content/docs/5.2/components/carousel.md index b2894ab12..fee28995b 100644 --- a/site/content/docs/5.2/components/carousel.md +++ b/site/content/docs/5.2/components/carousel.md @@ -208,10 +208,10 @@ Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to ### Disable touch swiping -Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute and has `data-bs-interval="false"` so it doesn't autoplay. +Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the `data-bs-touch` attribute. The example below also does not include the `data-bs-ride` attribute so it doesn't autoplay. {{< example >}} -<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false"> +<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false"> <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" >}} @@ -314,7 +314,7 @@ const carousel = new bootstrap.Carousel('#myCarousel') {{< bs-table >}} | Name | Type | Default | Description | | --- | --- | --- | --- | -| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If `false`, carousel will not automatically cycle. | +| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. | | `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. | | `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. | | `ride` | string, boolean | `false` | If set to `true`, autoplays the carousel after the user manually cycles the first item. If set to `"carousel"`, autoplays the carousel on load. | |