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`)
as
elementTypeDefault'div'Specifies element type for this component.
activeIndex
numberControls the current visible slide. Defaults to
defaultActiveIndexpropdefaultActiveIndex
numberDefault0Specifies default active index prop
controls
boolDefaulttrueShow the
Carousel'sprevious and next arrows for changing the current slide.fade
boolDefaultfalseAnimates slides with a crossfade animation instead of the default slide animation.
indicators
boolDefaulttrueShow a set of slide position indicators.
interval
numberDefault5000The amount of time to delay between automatically cycling an item.
keyboard
boolDefaulttrueSpecifies whether the
Carouselshould react to keyboard events.nextIcon
nodeDefault<span aria-hidden="true" className="carousel-control-next-icon" />Override the default button icon for the "next" control
nextLabel
stringDefault'Next'Label shown to screen readers only, can be used to show the next element in the
CarouselonSelect
funcCallback fired when the active item changes.
onSlid
funcCallback fired when a slide transition ends.
onSlide
funcCallback fired when a slide transition starts.
pause
enum'hover' | falseDefault'hover'If set to "hover", pauses the cycling of the
Carouselon mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over theCarouselwon'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.prevIcon
nodeDefault<span aria-hidden="true" className="carousel-control-prev-icon" />Override the default button icon for the "previous" control
prevLabel
stringDefault'Previous'Label shown to screen readers only, can be used to show the previous element in the
Carousel. Set to null to deactivate.slide
boolDefaulttrueEnables animation on the Carousel as it transitions between slides.
touch
boolDefaulttrueWhether the
Carouselshould support left/right swipe interactions on touchscreen devices.wrap
boolDefaulttrueWhether the
Carouselshould cycle continuously or have hard stopsbsPrefix
stringDefault'carousel'Overrides underlying component base CSS class name
as
elementTypeDefault'div'Specifies element type for this component.
interval
numberThe amount of time to delay between automatically cycling this specific item. Will default to the
Carousel'sinterval prop value if none is specified.bsPrefix
stringDefault'carousel-item'Overrides underlying component base CSS class name
as
elementTypeDefault'div'Specifies element type for this component.
bsPrefix
stringDefault'carousel-caption'Overrides underlying component base CSS class name