2014-07-12 11:20:15 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-07-12 11:20:15 +02:00
title: Carousel
2016-10-03 03:19:47 +02:00
description: A slideshow component for cycling through elements—images or slides of text—like a carousel.
2015-08-06 02:47:45 +02:00
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-12 11:20:15 +02:00
---
2017-05-28 08:01:14 +02:00
## How it works
2016-12-05 05:06:45 +01: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 15:37:21 +02:00
{{< callout info > }}
2019-01-08 17:33:28 +01:00
{{< partial " callout-info-prefersreducedmotion . md " > }}
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2018-11-03 19:23:26 +01:00
2016-12-05 05:37:21 +01:00
Please be aware that nested carousels are not supported, and carousels are generally not compliant with accessibility standards.
2014-07-13 09:54:14 +02:00
2014-09-18 00:21:31 +02:00
## Example
2014-07-13 09:54:14 +02:00
2016-12-05 05:37:21 +01: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 05:07:01 +01:00
2018-03-13 08:31:37 +01: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-target` attribute (or `href` for links) that matches the id of the `.carousel` element.
2016-12-05 05:07:01 +01:00
### Slides only
2018-02-18 19:22:41 +01: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 05:07:01 +01:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-12-05 05:07:01 +01:00
< div id = "carouselExampleSlidesOnly" class = "carousel slide" data-ride = "carousel" >
2017-04-11 12:12:30 +02:00
< div class = "carousel-inner" >
2016-12-05 05:07:01 +01:00
< div class = "carousel-item active" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2016-12-05 05:07:01 +01:00
### With controls
Adding in the previous and next controls:
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-12-05 05:07:01 +01:00
< div id = "carouselExampleControls" class = "carousel slide" data-ride = "carousel" >
2017-04-11 12:12:30 +02:00
< div class = "carousel-inner" >
2016-12-05 05:07:01 +01:00
< div class = "carousel-item active" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 05:07:01 +01:00
< / div >
< / div >
2016-12-05 08:19:54 +01:00
< a class = "carousel-control-prev" href = "#carouselExampleControls" role = "button" data-slide = "prev" >
2016-12-05 07:05:16 +01:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Previous< / span >
2016-12-05 05:07:01 +01:00
< / a >
2016-12-05 08:19:54 +01:00
< a class = "carousel-control-next" href = "#carouselExampleControls" role = "button" data-slide = "next" >
2016-12-05 07:05:16 +01:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Next< / span >
2016-12-05 05:07:01 +01:00
< / a >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2016-12-05 05:07:01 +01:00
### With indicators
You can also add the indicators to the carousel, alongside the controls, too.
2016-10-27 18:19:07 +02:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-12-05 05:07:01 +01:00
< div id = "carouselExampleIndicators" class = "carousel slide" data-ride = "carousel" >
2014-03-17 03:03:53 +01:00
< ol class = "carousel-indicators" >
2016-12-05 05:07:01 +01:00
< li data-target = "#carouselExampleIndicators" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carouselExampleIndicators" data-slide-to = "1" > < / li >
< li data-target = "#carouselExampleIndicators" data-slide-to = "2" > < / li >
2014-03-17 03:03:53 +01:00
< / ol >
2017-04-11 12:12:30 +02:00
< div class = "carousel-inner" >
2014-12-18 03:30:16 +01:00
< div class = "carousel-item active" >
2019-01-08 17:33:28 +01: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 03:03:53 +01:00
< / div >
2014-12-18 03:30:16 +01:00
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 09:54:14 +02:00
< / div >
2014-12-18 03:30:16 +01:00
< div class = "carousel-item" >
2019-01-08 17:33:28 +01:00
{{< placeholder width = "800" height = "400" class = "bd-placeholder-img-lg d-block w-100" color = "#333" background = "#555" text = "Third slide" > }}
2014-04-01 22:03:14 +02:00
< / div >
2014-03-17 03:03:53 +01:00
< / div >
2016-12-05 08:19:54 +01:00
< a class = "carousel-control-prev" href = "#carouselExampleIndicators" role = "button" data-slide = "prev" >
2016-12-05 07:05:16 +01:00
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Previous< / span >
2014-03-17 03:03:53 +01:00
< / a >
2016-12-05 08:19:54 +01:00
< a class = "carousel-control-next" href = "#carouselExampleIndicators" role = "button" data-slide = "next" >
2016-12-05 07:05:16 +01:00
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Next< / span >
2014-03-17 03:03:53 +01:00
< / a >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2014-03-17 03:03:53 +01:00
2016-12-05 05:37:21 +01:00
### With captions
2014-07-13 09:54:14 +02:00
2019-02-04 11:22:02 +01: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 09:54:14 +02:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2019-08-30 16:21:47 +02:00
< div id = "carouselExampleCaptions" class = "carousel slide" data-ride = "carousel" >
< ol class = "carousel-indicators" >
< li data-target = "#carouselExampleCaptions" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carouselExampleCaptions" data-slide-to = "1" > < / li >
< li data-target = "#carouselExampleCaptions" data-slide-to = "2" > < / li >
< / 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 >
< p > Nulla vitae elit libero, a pharetra augue mollis interdum.< / p >
2014-07-13 09:54:14 +02:00
< / div >
2019-08-30 16:21:47 +02: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 >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit.< / p >
2014-07-13 09:54:14 +02:00
< / div >
2019-08-30 16:21:47 +02: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 >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur.< / p >
2014-03-17 03:03:53 +01:00
< / div >
< / div >
2014-07-13 09:54:14 +02:00
< / div >
2019-08-30 16:21:47 +02:00
< a class = "carousel-control-prev" href = "#carouselExampleCaptions" role = "button" data-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Previous< / span >
2019-08-30 16:21:47 +02:00
< / a >
< a class = "carousel-control-next" href = "#carouselExampleCaptions" role = "button" data-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Next< / span >
2019-08-30 16:21:47 +02:00
< / a >
2014-07-13 09:54:14 +02:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2014-03-17 03:03:53 +01:00
2018-01-22 07:51:08 +01:00
### Crossfade
Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide.
2019-01-08 17:33:28 +01:00
{{< example > }}
2018-01-22 07:51:08 +01:00
< div id = "carouselExampleFade" class = "carousel slide carousel-fade" data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" >
2019-01-08 17:33:28 +01: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 07:51:08 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 07:51:08 +01:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 07:51:08 +01:00
< / div >
< / div >
< a class = "carousel-control-prev" href = "#carouselExampleFade" role = "button" data-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Previous< / span >
2018-01-22 07:51:08 +01:00
< / a >
< a class = "carousel-control-next" href = "#carouselExampleFade" role = "button" data-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Next< / span >
2018-01-22 07:51:08 +01:00
< / a >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2018-09-18 14:55:48 +02:00
### Individual `.carousel-item` interval
Add `data-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item.
2019-01-08 17:33:28 +01:00
{{< example > }}
2018-09-18 14:55:48 +02:00
< div id = "carouselExampleInterval" class = "carousel slide" data-ride = "carousel" >
< div class = "carousel-inner" >
< div class = "carousel-item active" data-interval = "10000" >
2019-01-08 17:33:28 +01: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 14:55:48 +02:00
< / div >
2018-11-08 18:33:02 +01:00
< div class = "carousel-item" data-interval = "2000" >
2019-01-08 17:33:28 +01: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 14:55:48 +02:00
< / div >
< div class = "carousel-item" >
2019-01-08 17:33:28 +01: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 14:55:48 +02:00
< / div >
< / div >
< a class = "carousel-control-prev" href = "#carouselExampleInterval" role = "button" data-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Previous< / span >
2018-09-18 14:55:48 +02:00
< / a >
< a class = "carousel-control-next" href = "#carouselExampleInterval" role = "button" data-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
2020-07-03 13:38:11 +02:00
< span class = "visually-hidden" > Next< / span >
2018-09-18 14:55:48 +02:00
< / a >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2018-01-22 07:51:08 +01:00
2020-09-24 22:16:20 +02: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 > }}
< div id = "carouselExampleDark" class = "carousel carousel-dark slide" data-ride = "carousel" >
< ol class = "carousel-indicators" >
< li data-target = "#carouselExampleDark" data-slide-to = "0" class = "active" > < / li >
< li data-target = "#carouselExampleDark" data-slide-to = "1" > < / li >
< li data-target = "#carouselExampleDark" data-slide-to = "2" > < / li >
< / ol >
< div class = "carousel-inner" >
< div class = "carousel-item active" data-interval = "10000" >
{{< 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 >
< p > Nulla vitae elit libero, a pharetra augue mollis interdum.< / p >
< / div >
< / div >
< div class = "carousel-item" data-interval = "2000" >
{{< 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 >
< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit.< / p >
< / 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 >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur.< / p >
< / div >
< / div >
< / div >
< a class = "carousel-control-prev" href = "#carouselExampleDark" role = "button" data-slide = "prev" >
< span class = "carousel-control-prev-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Previous< / span >
< / a >
< a class = "carousel-control-next" href = "#carouselExampleDark" role = "button" data-slide = "next" >
< span class = "carousel-control-next-icon" aria-hidden = "true" > < / span >
< span class = "visually-hidden" > Next< / span >
< / a >
< / div >
{{< / example > }}
2018-01-22 07:51:08 +01:00
2014-07-13 09:54:14 +02:00
## Usage
### Via data attributes
2014-03-17 03:03:53 +01:00
2014-07-13 09:54:14 +02:00
Use data attributes to easily control the position of the carousel. `data-slide` accepts the keywords `prev` or `next` , which alters the slide position relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel `data-slide-to="2"` , which shifts the slide position to a particular index beginning with `0` .
2019-01-04 17:15:01 +01:00
The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load. If you don't use `data-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 09:54:14 +02:00
### Via JavaScript
Call carousel manually with:
2014-03-17 03:03:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2018-09-15 13:44:23 +02:00
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2014-07-13 09:54:14 +02:00
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-` , as in `data-interval=""` .
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-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02: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 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02:00
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > interval< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > number< / td >
2020-06-27 13:28:21 +02:00
< td > < code > 5000< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.< / td >
< / tr >
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > keyboard< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > boolean< / td >
2020-06-27 13:28:21 +02:00
< td > < code > true< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > Whether the carousel should react to keyboard events.< / td >
< / tr >
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > pause< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > string | boolean< / td >
2020-06-27 13:28:21 +02:00
< td > < code > "hover"< / code > < / td >
2017-04-28 00:57:10 +02:00
< 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 >
< / tr >
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > slide< / code > < / td >
2018-09-15 13:44:23 +02:00
< td > string | boolean< / td >
2020-06-27 13:28:21 +02:00
< td > < code > false< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.< / td >
< / tr >
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > wrap< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > boolean< / td >
2020-06-27 13:28:21 +02:00
< td > < code > true< / code > < / td >
2017-04-28 00:57:10 +02:00
< td > Whether the carousel should cycle continuously or have hard stops.< / td >
< / tr >
2018-03-03 22:04:11 +01:00
< tr >
2020-06-27 13:28:21 +02:00
< td > < code > touch< / code > < / td >
2018-03-03 22:04:11 +01:00
< td > boolean< / td >
2020-06-27 13:28:21 +02:00
< td > < code > true< / code > < / td >
2018-10-14 13:59:51 +02:00
< td > Whether the carousel should support left/right swipe interactions on touchscreen devices.< / td >
2018-03-03 22:04:11 +01:00
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2014-07-13 09:54:14 +02:00
### Methods
2020-10-13 15:37:21 +02:00
{{< callout danger > }}
2019-01-08 17:33:28 +01:00
{{< partial " callout-danger-async-methods . md " > }}
2020-10-13 15:37:21 +02:00
{{< / callout > }}
2017-03-28 23:43:16 +02:00
2018-09-15 13:44:23 +02: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 09:54:14 +02:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2018-09-15 13:44:23 +02:00
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
2014-03-17 03:03:53 +01:00
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01: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-12 23:52:33 +02: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 14:49:02 +02: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-12 23:52:33 +02: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 13:58:59 +02: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-12 23:52:33 +02:00
< / tr >
< tr >
2019-07-28 15:24:46 +02: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-12 23:52:33 +02:00
< td > Static method which allows you to get the carousel instance associated with a DOM element.< / td >
< / tr >
< / tbody >
< / table >
2017-10-16 16:51:42 +02:00
2014-07-13 09:54:14 +02: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-22 22:42:13 +01:00
- `from` : The index of the current item
- `to` : The index of the next item
2014-07-13 09:54:14 +02:00
2015-03-01 22:44:10 +01:00
All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">` ).
2014-07-13 09:54:14 +02: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-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02: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-12 23:52:33 +02:00
< th style = "width: 150px;" > Event type< / th >
2017-04-28 00:57:10 +02:00
< th > Description< / th >
< / tr >
2017-01-01 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02: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-12 23:52:33 +02:00
< td > < code > slide.bs.carousel< / code > < / td >
< td > Fires immediately when the < code > slide< / code > instance method is invoked.< / td >
2017-04-28 00:57:10 +02: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-12 23:52:33 +02:00
< td > < code > slid.bs.carousel< / code > < / td >
< td > Fired when the carousel has completed its slide transition.< / td >
2017-04-28 00:57:10 +02:00
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2014-07-13 09:54:14 +02:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2019-05-14 11:43:12 +02:00
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
2019-02-10 21:25:51 +01:00
// do something...
2014-03-17 03:03:53 +01:00
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2018-02-19 10:10:25 +01:00
### Change transition duration
2018-03-13 09:59:20 +01:00
The transition duration of `.carousel-item` can be changed with the `$carousel-transition` 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` ).