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

    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'

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)