2014-07-12 17:20:15 +08:00
---
2015-08-15 13:45:55 +08:00
layout: docs
2014-07-12 17:20:15 +08:00
title: Carousel
2016-10-03 09:19:47 +08:00
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
2015-08-06 08:47:45 +08:00
group: components
2017-05-28 14:01:14 +08:00
toc: true
2014-07-12 17:20:15 +08:00
---
2017-05-28 14:01:14 +08:00
## How it works
2016-12-05 12:06:45 +08:00
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the [Page Visibility API ](https://www.w3.org/TR/page-visibility/ ) is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
2020-10-13 21:37:21 +08:00
{{< callout info > }}
2019-01-09 00:33:28 +08:00
{{< partial " callout-info-prefersreducedmotion . md " > }}
2020-10-13 21:37:21 +08:00
{{< / callout > }}
2018-11-04 02:23:26 +08:00
2016-12-05 12:37:21 +08:00
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
2014-07-13 15:54:14 +08:00
2014-09-18 06:21:31 +08:00
## Example
2014-07-13 15:54:14 +08:00
2016-12-05 12:37:21 +08:00
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.
2016-12-05 12:07:01 +08:00
2021-01-27 23:31:16 +08:00
**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.
2016-12-05 12:07:01 +08:00
### Slides only
2018-02-19 02:22:41 +08:00
Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment.
2016-12-05 12:07:01 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleSlidesOnly" class = "carousel slide" data-bs-ride = "carousel" >
2017-04-11 18:12:30 +08:00
< div class = "carousel-inner" >
2016-12-05 12:07:01 +08:00
< div class = "carousel-item active" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#555" background = "#777" text = "First slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< / div >
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2016-12-05 12:07:01 +08:00
### With controls
2021-01-27 23:31:16 +08:00
Adding in the previous and next controls. We recommend using `<button>` elements, but you can also use `<a>` elements with `role="button"` .
2016-12-05 12:07:01 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleControls" class = "carousel slide" data-bs-ride = "carousel" >
2017-04-11 18:12:30 +08:00
< div class = "carousel-inner" >
2016-12-05 12:07:01 +08:00
< div class = "carousel-item active" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#555" background = "#777" text = "First slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2016-12-05 12:07:01 +08:00
< / div >
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleControls" data-bs-slide = "prev" >
2016-12-05 14:05:16 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleControls" data-bs-slide = "next" >
2016-12-05 14:05:16 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2016-12-05 12:07:01 +08:00
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2016-12-05 12:07:01 +08:00
### With indicators
You can also add the indicators to the carousel, alongside the controls, too.
2016-10-28 00:19:07 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleIndicators" class = "carousel slide" data-bs-ride = "carousel" >
2014-03-17 10:03:53 +08:00
< ol class = "carousel-indicators" >
2020-07-23 03:33:11 +08:00
< 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 >
2014-03-17 10:03:53 +08:00
< / ol >
2017-04-11 18:12:30 +08:00
< div class = "carousel-inner" >
2014-12-18 10:30:16 +08:00
< div class = "carousel-item active" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#555" background = "#777" text = "First slide" > }}
2014-03-17 10:03:53 +08:00
< / div >
2014-12-18 10:30:16 +08:00
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
2014-07-13 15:54:14 +08:00
< / div >
2014-12-18 10:30:16 +08:00
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2014-04-02 04:03:14 +08:00
< / div >
2014-03-17 10:03:53 +08:00
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleIndicators" data-bs-slide = "prev" >
2016-12-05 14:05:16 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleIndicators" data-bs-slide = "next" >
2016-12-05 14:05:16 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2014-03-17 10:03:53 +08:00
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2014-03-17 10:03:53 +08:00
2016-12-05 12:37:21 +08:00
### With captions
2014-07-13 15:54:14 +08:00
2019-02-04 18:22:02 +08:00
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item` . They can be easily hidden on smaller viewports, as shown below, with optional [display utilities ]({{< docsref "/utilities/display" >}} ). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block` .
2014-07-13 15:54:14 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleCaptions" class = "carousel slide" data-bs-ride = "carousel" >
2019-08-30 22:21:47 +08:00
< ol class = "carousel-indicators" >
2020-07-23 03:33:11 +08:00
< 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 >
2019-08-30 22:21:47 +08:00
< / ol >
< 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" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > First slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the first slide.< / p >
2014-07-13 15:54:14 +08:00
< / div >
2019-08-30 22:21:47 +08:00
< / div >
< div class = "carousel-item" >
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > Second slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the second slide.< / p >
2014-07-13 15:54:14 +08:00
< / div >
2019-08-30 22:21:47 +08:00
< / div >
< div class = "carousel-item" >
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > Third slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the third slide.< / p >
2014-03-17 10:03:53 +08:00
< / div >
< / div >
2014-07-13 15:54:14 +08:00
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleCaptions" data-bs-slide = "prev" >
2019-08-30 22:21:47 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleCaptions" data-bs-slide = "next" >
2019-08-30 22:21:47 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2014-07-13 15:54:14 +08:00
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2014-03-17 10:03:53 +08:00
2018-01-22 14:51:08 +08:00
### Crossfade
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleFade" class = "carousel slide carousel-fade" data-bs-ride = "carousel" >
2018-01-22 14:51:08 +08:00
< div class = "carousel-inner" >
< div class = "carousel-item active" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#555" background = "#777" text = "First slide" > }}
2018-01-22 14:51:08 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
2018-01-22 14:51:08 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2018-01-22 14:51:08 +08:00
< / div >
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleFade" data-bs-slide = "prev" >
2018-01-22 14:51:08 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleFade" data-bs-slide = "next" >
2018-01-22 14:51:08 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2018-01-22 14:51:08 +08:00
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2018-09-18 20:55:48 +08:00
### Individual `.carousel-item` interval
2020-07-23 03:33:11 +08:00
Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
2018-09-18 20:55:48 +08:00
2019-01-09 00:33:28 +08:00
{{< example > }}
2020-07-23 03:33:11 +08:00
< div id = "carouselExampleInterval" class = "carousel slide" data-bs-ride = "carousel" >
2018-09-18 20:55:48 +08:00
< div class = "carousel-inner" >
2020-07-23 03:33:11 +08:00
< div class = "carousel-item active" data-bs-interval = "10000" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#555" background = "#777" text = "First slide" > }}
2018-09-18 20:55:48 +08:00
< / div >
2020-07-23 03:33:11 +08:00
< div class = "carousel-item" data-bs-interval = "2000" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
2018-09-18 20:55:48 +08:00
< / div >
< div class = "carousel-item" >
2019-01-09 00:33:28 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2018-09-18 20:55:48 +08:00
< / div >
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleInterval" data-bs-slide = "prev" >
2018-09-18 20:55:48 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleInterval" data-bs-slide = "next" >
2018-09-18 20:55:48 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 19:38:11 +08:00
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2018-09-18 20:55:48 +08:00
< / div >
2019-01-09 00:33:28 +08:00
{{< / example > }}
2018-01-22 14:51:08 +08:00
2021-01-06 08:59:44 +08:00
### Disable touch swiping
2020-12-29 21:40:42 +08:00
2021-01-06 08:59:44 +08:00
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.
2020-12-29 21:40:42 +08:00
{{< example > }}
< div id = "carouselExampleControlsNoTouching" class = "carousel slide" data-bs-touch = "false" data-bs-interval = "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" > }}
< / div >
< div class = "carousel-item" >
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#444" background = "#666" text = "Second slide" > }}
< / div >
< div class = "carousel-item" >
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
< / div >
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleControlsNoTouching" data-bs-slide = "prev" >
2020-12-29 21:40:42 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleControlsNoTouching" data-bs-slide = "next" >
2020-12-29 21:40:42 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2020-12-29 21:40:42 +08:00
< / div >
{{< / example > }}
2020-09-25 04:16:20 +08:00
## Dark variant
Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color` .
{{< example > }}
2020-11-06 23:21:57 +08:00
< div id = "carouselExampleDark" class = "carousel carousel-dark slide" data-bs-ride = "carousel" >
2020-09-25 04:16:20 +08:00
< ol class = "carousel-indicators" >
2020-11-06 23:21:57 +08:00
< 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 >
2020-09-25 04:16:20 +08:00
< / ol >
< div class = "carousel-inner" >
2020-11-06 23:21:57 +08:00
< div class = "carousel-item active" data-bs-interval = "10000" >
2020-09-25 04:16:20 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#aaa" background = "#f5f5f5" text = "First slide" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > First slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the first slide.< / p >
2020-09-25 04:16:20 +08:00
< / div >
< / div >
2020-11-06 23:21:57 +08:00
< div class = "carousel-item" data-bs-interval = "2000" >
2020-09-25 04:16:20 +08:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#bbb" background = "#eee" text = "Second slide" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > Second slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the second slide.< / p >
2020-09-25 04:16:20 +08:00
< / div >
< / div >
< div class = "carousel-item" >
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#999" background = "#e5e5e5" text = "Third slide" > }}
< div class = "carousel-caption d-none d-md-block" >
< h5 > Third slide label< / h5 >
2020-12-12 04:05:33 +08:00
< p > Some representative placeholder content for the third slide.< / p >
2020-09-25 04:16:20 +08:00
< / div >
< / div >
< / div >
2021-01-27 23:31:16 +08:00
< button class = "carousel-control-prev" type = "button" data-bs-target = "#carouselExampleDark" data-bs-slide = "prev" >
2020-09-25 04:16:20 +08:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Previous< / span >
2021-01-27 23:31:16 +08:00
< / button >
< button class = "carousel-control-next" type = "button" data-bs-target = "#carouselExampleDark" data-bs-slide = "next" >
2020-09-25 04:16:20 +08:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Next< / span >
2021-01-27 23:31:16 +08:00
< / button >
2020-09-25 04:16:20 +08:00
< / div >
{{< / example > }}
2018-01-22 14:51:08 +08:00
2014-07-13 15:54:14 +08:00
## Usage
### Via data attributes
2014-03-17 10:03:53 +08:00
2020-07-23 03:33:11 +08:00
Use data attributes to easily control the position of the carousel. `data-bs-slide` accepts the keywords `prev` or `next` , which alters the slide position relative to its current position. Alternatively, use `data-bs-slide-to` to pass a raw slide index to the carousel `data-bs-slide-to="2"` , which shifts the slide position to a particular index beginning with `0` .
2014-07-13 15:54:14 +08:00
2020-07-23 03:33:11 +08:00
The `data-bs-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-bs-ride="carousel"` to initialize your carousel, you have to initialize it yourself. **It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.**
2014-07-13 15:54:14 +08:00
### Via JavaScript
Call carousel manually with:
2014-03-17 10:03:53 +08:00
2020-10-19 17:56:49 +08:00
```js
2018-09-15 19:44:23 +08:00
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
2020-10-19 17:56:49 +08:00
```
2014-03-17 10:03:53 +08:00
2014-07-13 15:54:14 +08:00
### Options
2020-07-23 03:33:11 +08:00
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-` , as in `data-bs-interval=""` .
2014-07-13 15:54:14 +08:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< table class = "table" >
2017-01-01 08:12:28 +08:00
< thead >
2017-04-28 06:57:10 +08:00
< tr >
< th style = "width: 100px;" > Name< / th >
< th style = "width: 50px;" > Type< / th >
< th style = "width: 50px;" > Default< / th >
< th > Description< / th >
< / tr >
2017-01-01 08:12:28 +08:00
< / thead >
< tbody >
2017-04-28 06:57:10 +08:00
< tr >
2020-06-27 19:28:21 +08:00
< td > < code > interval< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > number< / td >
2020-06-27 19:28:21 +08:00
< td > < code > 5000< / code > < / td >
2020-12-29 21:40:42 +08:00
< td > The amount of time to delay between automatically cycling an item. If < code > false< / code > , carousel will not automatically cycle.< / td >
2017-04-28 06:57:10 +08:00
< / tr >
< tr >
2020-06-27 19:28:21 +08:00
< td > < code > keyboard< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > boolean< / td >
2020-06-27 19:28:21 +08:00
< td > < code > true< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > Whether the carousel should react to keyboard events.< / td >
< / tr >
< tr >
2020-06-27 19:28:21 +08:00
< td > < code > pause< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > string | boolean< / td >
2020-12-29 21:40:42 +08:00
< td > < code > 'hover'< / code > < / td >
< td > < p > If set to < code > 'hover'< / code > , pauses the cycling of the carousel on < code > mouseenter< / code > and resumes the cycling of the carousel on < code > mouseleave< / code > . If set to < code > false< / code > , hovering over the carousel won't pause it.< / p >
< p > On touch-enabled devices, when set to < code > 'hover'< / code > , cycling will pause on < code > touchend< / code > (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.< / p > < / td >
2017-04-28 06:57:10 +08:00
< / tr >
< tr >
2020-12-29 21:40:42 +08:00
< td > < code > ride< / code > < / td >
2018-09-15 19:44:23 +08:00
< td > string | boolean< / td >
2020-06-27 19:28:21 +08:00
< td > < code > false< / code > < / td >
2020-12-29 21:40:42 +08:00
< td > Autoplays the carousel after the user manually cycles the first item. If set to < code > 'carousel'< / code > , autoplays the carousel on load.< / td >
2017-04-28 06:57:10 +08:00
< / tr >
< tr >
2020-06-27 19:28:21 +08:00
< td > < code > wrap< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > boolean< / td >
2020-06-27 19:28:21 +08:00
< td > < code > true< / code > < / td >
2017-04-28 06:57:10 +08:00
< td > Whether the carousel should cycle continuously or have hard stops.< / td >
< / tr >
2018-03-04 05:04:11 +08:00
< tr >
2020-06-27 19:28:21 +08:00
< td > < code > touch< / code > < / td >
2018-03-04 05:04:11 +08:00
< td > boolean< / td >
2020-06-27 19:28:21 +08:00
< td > < code > true< / code > < / td >
2018-10-14 19:59:51 +08:00
< td > Whether the carousel should support left/right swipe interactions on touchscreen devices.< / td >
2018-03-04 05:04:11 +08:00
< / tr >
2017-01-01 08:12:28 +08:00
< / tbody >
< / table >
2014-07-13 15:54:14 +08:00
### Methods
2020-10-13 21:37:21 +08:00
{{< callout danger > }}
2019-01-09 00:33:28 +08:00
{{< partial " callout-danger-async-methods . md " > }}
2020-10-13 21:37:21 +08:00
{{< / callout > }}
2017-03-29 05:43:16 +08:00
2018-09-15 19:44:23 +08:00
You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:
2014-07-13 15:54:14 +08:00
2020-10-19 17:56:49 +08:00
```js
2018-09-15 19:44:23 +08:00
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
2014-03-17 10:03:53 +08:00
})
2020-10-19 17:56:49 +08:00
```
2014-03-17 10:03:53 +08:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< table class = "table" >
< thead >
< tr >
< th > Method< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > < code > cycle< / code > < / td >
< td > Cycles through the carousel items from left to right.< / td >
< / tr >
< tr >
< td > < code > pause< / code > < / td >
< td > Stops the carousel from cycling through items.< / td >
< / tr >
< tr >
< td > < code > prev< / code > < / td >
< td > Cycles to the previous item. < strong > Returns to the caller before the previous item has been shown< / strong > (e.g., before the < code > slid.bs.carousel< / code > event occurs).< / td >
< / tr >
< tr >
< td > < code > next< / code > < / td >
< td > Cycles to the next item. < strong > Returns to the caller before the next item has been shown< / strong > (e.g., before the < code > slid.bs.carousel< / code > event occurs).< / td >
< / tr >
< tr >
< td > < code > nextWhenVisible< / code > < / td >
2020-10-05 20:49:02 +08:00
< td > Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. < strong > Returns to the caller before the target item has been shown< / strong >
< / tr >
< tr >
< td > < code > to< / code > < / td >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< td > Cycles the carousel to a particular frame (0 based, similar to an array). < strong > Returns to the caller before the target item has been shown< / strong > (e.g., before the < code > slid.bs.carousel< / code > event occurs).< / td >
< / tr >
< tr >
< td > < code > dispose< / code > < / td >
2020-10-02 19:58:59 +08:00
< td > Destroys an element's carousel. (Removes stored data on the DOM element)< / td >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< / tr >
< tr >
2019-07-28 21:24:46 +08:00
< td > < code > getInstance< / code > < / td >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< td > Static method which allows you to get the carousel instance associated with a DOM element.< / td >
< / tr >
< / tbody >
< / table >
2017-10-16 22:51:42 +08:00
2014-07-13 15:54:14 +08:00
### Events
Bootstrap's carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:
- `direction` : The direction in which the carousel is sliding (either `"left"` or `"right"` ).
- `relatedTarget` : The DOM element that is being slid into place as the active item.
2017-03-23 05:42:13 +08:00
- `from` : The index of the current item
- `to` : The index of the next item
2014-07-13 15:54:14 +08:00
2015-03-02 05:44:10 +08:00
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">` ).
2014-07-13 15:54:14 +08:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< table class = "table" >
2017-01-01 08:12:28 +08:00
< thead >
2017-04-28 06:57:10 +08:00
< tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< th style = "width: 150px;" > Event type< / th >
2017-04-28 06:57:10 +08:00
< th > Description< / th >
< / tr >
2017-01-01 08:12:28 +08:00
< / thead >
< tbody >
2017-04-28 06:57:10 +08:00
< tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< td > < code > slide.bs.carousel< / code > < / td >
< td > Fires immediately when the < code > slide< / code > instance method is invoked.< / td >
2017-04-28 06:57:10 +08:00
< / tr >
< tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-13 05:52:33 +08:00
< td > < code > slid.bs.carousel< / code > < / td >
< td > Fired when the carousel has completed its slide transition.< / td >
2017-04-28 06:57:10 +08:00
< / tr >
2017-01-01 08:12:28 +08:00
< / tbody >
< / table >
2014-07-13 15:54:14 +08:00
2020-10-19 17:56:49 +08:00
```js
2019-05-14 17:43:12 +08:00
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
2019-02-11 04:25:51 +08:00
// do something...
2014-03-17 10:03:53 +08:00
})
2020-10-19 17:56:49 +08:00
```
2018-02-19 17:10:25 +08:00
### Change transition duration
2020-12-08 14:06:08 +08:00
The transition duration of `.carousel-item` can be changed with the `$carousel-transition-duration` Sass variable before compiling or custom styles if you're using the compiled CSS. If multiple transitions are applied, make sure the transform transition is defined first (eg. `transition: transform 2s ease, opacity .5s ease-out` ).
