HamburgerHamburger Icon

Carousels

Media Groups & Carousels consist of a group of Media Blocks that are grouped together, or have the ability to be scrolled by swiping or button navigation. They are used as a gallery of information.

KSPTrialProduct HeroProduct PanelBundle PanelCollectionCollection BGCard CarouselCard GroupDrawerLogo GroupLifestyleQuoteReviewsRelated GroupGuide Group
Media Carousel Properties

Name

Description

Type

Required

Default

className

List of classes for this element.

string | array

false

""

id

Unique identifier for the carousel.

string

false

null

title

Carousel headline.

string

false

""

summary

Summary or text description of carousel.

string

false

null

summary sub properties

Name

Description

Type

Required

Default

summary

DOM node of Ref object

string

false

childMarkdownRemark

Markdown HTML object

object

false

childMarkdownRemark sub properties

Name

Description

Type

Required

Default

html

HTML content.

string

false

reviewInfo

Info for review carousel.

object

false

null

reviewInfo sub properties

Name

Description

Type

Required

Default

score

Numeric value of product review score.

number

false

numReviews

Total number of reviews.

number

false

reviewModal

Setting to manage for review modals.

object

false

null

reviewModal sub properties

Name

Description

Type

Required

Default

showReviewModal

Review modal is displayed if true.

boolean

false

reviewModalContent

Review modal content.

node

false

setShowReviewModal

Handler for showing/hiding reivew modal.

function

false

reviewStars

Review stars image.

object

false

null

reviewStars sub properties

Name

Description

Type

Required

Default

gatsbyImageData

Image object.

object

true

children

Carousel content.

node

false

null

grid

Utilizes Lattice grid for media block if true.

boolean

false

true

fullWidth

Carousel spans full screen width if true.

boolean

false

true

backgroundColor

Background color.

string

false

null

backgroundImage

Background image of carousel.

object

false

null

backgroundImage sub properties

Name

Description

Type

Required

Default

gatsbyImageData

Image object.

object

true

mobileBackgroundImage

Background mobile image of carousel.

object

false

null

mobileBackgroundImage sub properties

Name

Description

Type

Required

Default

gatsbyImageData

Image object.

object

true

image

Main image of carousel.

object

false

null

image sub properties

Name

Description

Type

Required

Default

gatsbyImageData

Image object.

object

true

mobileImage

Main mobile image of carousel.

object

false

null

mobileImage sub properties

Name

Description

Type

Required

Default

gatsbyImageData

Image object.

object

true

settings

Carousel slider settings object.

object

false

{}

settings sub properties

Name

Description

Type

Required

Default

dots

Displays slider navigation if true.

boolean

false

infinite

Infinite navigation if true.

boolean

false

speed

Time in milliseconds for slider animation to complete.

number

false

slidesToScroll

Displays slider navigation if true.

boolean

false

variableWidth

Allows for fluid slide width if true.

boolean

false

lazyLoad

Lazy load strategy ("progressive" | "ondemand")

string

false

arrows

Displays next and previous arrows if true.

boolean

false

centerMode

Displays current slide at center if true.

boolean

false

initialSlide

Index of first slide to display.

number

false

responsive

List of device specific settings.

array

false

responsive sub properties

Name

Description

Type

Required

Default

breakpoint

Max width in pixels where all settings will be applied.

number

false

settings

Settings object at specified breakpoint.

object

false

useSlider

Uses slider functionality for group if true.

boolean

false

true

useTitle

Display title attribute with title property if true.

boolean

false

false

useWrapper

Adds wrapper element around carousel if true.

boolean

false

false

wrapperClassName

List of classes for this wrapper element.

string | array

false

""

wrapperComponent

Carousel wrapper component.

element

false

"div"

wrapperProps

Additional carousel wrapper config.

object

false

{}

wrapperChildren

Carosuel wrapper content.

node

false

null

forwardRef

Ref to component or DOM element.

function | object

false

null

forwardRef sub properties

Name

Description

Type

Required

Default

current

DOM node of Ref object

any

false

null

props

Additional carousel config.

object

false

{}

props sub properties

Name

Description

Type

Required

Default

route

URL route link.

string

false

lazyLoad

Lazy load media carousel image if true.

boolean

false

false

forceRender

Forces a carousel render on page load

boolean

false

false

renderProps

Strategy for rendering carousel on page load

object

false

null