Carousel

This is a pass through component from React-Bootstrap.
See React-Bootstrap for documentation.

Basic Usage

Theme Variables (SCSS)#



// Carousel

$carousel-control-color:             $white !default;
$carousel-control-width:             15% !default;
$carousel-control-opacity:           .5 !default;
$carousel-control-hover-opacity:     .9 !default;
$carousel-control-transition:        opacity .15s ease !default;

$carousel-indicator-width:           30px !default;
$carousel-indicator-height:          3px !default;
$carousel-indicator-hit-area-height: 10px !default;
$carousel-indicator-spacer:          3px !default;
$carousel-indicator-active-bg:       $white !default;
$carousel-indicator-transition:      opacity .6s ease !default;

$carousel-caption-width:             70% !default;
$carousel-caption-color:             $white !default;

$carousel-control-icon-width:        20px !default;

$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;

$carousel-transition-duration:       .6s !default;
$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Carousel Props API

as
elementType
Specifies element type for this component.
Default'div'
activeIndex
number
Controls the current visible slide. Defaults to defaultActiveIndex prop
defaultActiveIndex
number
Specifies default active index prop
Default0
controls
bool
Show the Carousel's previous and next arrows for changing the current slide.
Defaulttrue
fade
bool
Animates slides with a crossfade animation instead of the default slide animation.
Defaultfalse
indicators
bool
Show a set of slide position indicators.
Defaulttrue
interval
number
The amount of time to delay between automatically cycling an item.
Default5000
keyboard
bool
Specifies whether the Carousel should react to keyboard events.
Defaulttrue
nextIcon
node
Override the default button icon for the "next" control
Default<span aria-hidden="true" className="carousel-control-next-icon" />
nextLabel
string
Label shown to screen readers only, can be used to show the next element in the Carousel
Default'Next'
onSelect
func
Callback fired when the active item changes.
onSlid
func
Callback fired when a slide transition ends.
onSlide
func
Callback fired when a slide transition starts.
pause
enum'hover' | false
If set to "hover", pauses the cycling of the Carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the Carousel won't pause it.
On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the Carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
Default'hover'
prevIcon
node
Override the default button icon for the "previous" control
Default<span aria-hidden="true" className="carousel-control-prev-icon" />
prevLabel
string
Label shown to screen readers only, can be used to show the previous element in the Carousel. Set to null to deactivate.
Default'Previous'
slide
bool
Enables animation on the Carousel as it transitions between slides.
Defaulttrue
touch
bool
Whether the Carousel should support left/right swipe interactions on touchscreen devices.
Defaulttrue
wrap
bool
Whether the Carousel should cycle continuously or have hard stops
Defaulttrue
bsPrefix
string
Overrides underlying component base CSS class name
Default'carousel'

CarouselItem Props API

as
elementType
Specifies element type for this component.
Default'div'
interval
number
The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's interval prop value if none is specified.
bsPrefix
string
Overrides underlying component base CSS class name
Default'carousel-item'

CarouselCaption Props API

as
elementType
Specifies element type for this component.
Default'div'
bsPrefix
string
Overrides underlying component base CSS class name
Default'carousel-caption'

Carousel

Basic Usage#

Theme Variables (SCSS)#

as

activeIndex

defaultActiveIndex

controls

fade

indicators

interval

keyboard

nextIcon

nextLabel

onSelect

onSlid

onSlide

pause

prevIcon

prevLabel

slide

touch

wrap

bsPrefix

as

interval

bsPrefix

as

bsPrefix

Guides

Foundations

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Basic Usage