Paragon Design System

Technical Documentation

npm_version
Changelog
GitHub

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;


// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;
Carousel Props API
  • as elementType Required

    Specifies element type for this component.

    Default'div'
  • activeIndex number Required

    Controls the current visible slide. Defaults to defaultActiveIndex prop

  • defaultActiveIndex number Required

    Specifies default active index prop

    Default0
  • controls bool Required

    Show the Carousel's previous and next arrows for changing the current slide.

    Defaulttrue
  • fade bool Required

    Animates slides with a crossfade animation instead of the default slide animation.

    Defaultfalse
  • indicators bool Required

    Show a set of slide position indicators.

    Defaulttrue
  • interval number Required

    The amount of time to delay between automatically cycling an item.

    Default5000
  • keyboard bool Required

    Specifies whether the Carousel should react to keyboard events.

    Defaulttrue
  • nextIcon node Required

    Override the default button icon for the "next" control

    Default<span aria-hidden="true" className="carousel-control-next-icon" />
  • nextLabel string Required

    Label shown to screen readers only, can be used to show the next element in the Carousel

    Default'Next'
  • onSelect func Required

    Callback fired when the active item changes.

  • onSlid func Required

    Callback fired when a slide transition ends.

  • onSlide func Required

    Callback fired when a slide transition starts.

  • pause enum Required'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 Required

    Override the default button icon for the "previous" control

    Default<span aria-hidden="true" className="carousel-control-prev-icon" />
  • prevLabel string Required

    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 Required

    Enables animation on the Carousel as it transitions between slides.

    Defaulttrue
  • touch bool Required

    Whether the Carousel should support left/right swipe interactions on touchscreen devices.

    Defaulttrue
  • wrap bool Required

    Whether the Carousel should cycle continuously or have hard stops

    Defaulttrue
  • bsPrefix string Required

    Overrides underlying component base CSS class name

    Default'carousel'
CarouselItem Props API
  • as elementType Required

    Specifies element type for this component.

    Default'div'
  • interval number Required

    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 Required

    Overrides underlying component base CSS class name

    Default'carousel-item'
CarouselCaption Props API
  • as elementType Required

    Specifies element type for this component.

    Default'div'
  • bsPrefix string Required

    Overrides underlying component base CSS class name

    Default'carousel-caption'

Contents

Guides

Foundations

PlaygroundBeta

  • A drag-and-drop UI builder for prototyping with Paragon components.

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)