** Disclaimer: ** On a mobile device the carousel has the full functionality of scrolling, pagination, and snapping to a slide. While on the web, the carousel is restricted to scrolling only by dragging the bottom scroll bar or using the pagination buttons.

import { Carousel } from '@uhg-abyss/mobile';

Heading

Use the heading prop to add a heading above the carousel.

Action Text

Use the actionText prop to add an action button next to the heading.

Programmatic Slide Navigation

Carousel exposes methods and state to programmatically control the current slide via a ref.

• goToSlide(slide: number): Function to programmatically change to a specific slide
• goToPrevSlide(): Function to programmatically go to the previous slide
• goToNextSlide(): Function to programmatically go to the next slide
• activeSlide: The currently active slide

Disable Scrolling

Use the disableScrolling prop to prevent the carousel from scrolling.

Disable Pagination

Use the disablePagination prop to remove the pagination bullets below the carousel.

Slide Gap

Use the slideGap prop to add a gap between each slide. The default value is $carousel.space.slide-gap || 8.

Snap Percentage

Use the snapPercentage prop to set minimum percent in either direction a carousel should be shifted to snap to another carousel. The default value is 30.

In the examples below, there is a green line denoting how much the carousel would need to scroll before snapping to the next slide.

Data

Carousel is made to be used in conjunction with slides, therefore the data prop is required. This prop takes in an array that contains the information to be rendered on each slide.

const slides = [
    {
      imageBackgroundColor: '$semantic.color.surface.container.secondary',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.3',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.4',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.2',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      imageBackgroundColor: '$semantic.color.surface.container.emphasis.1',
      eyebrow: 'In-App Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

Render Slide

Use the renderSlide prop to render the data passed into Carousel. This function takes in the slide object and index number.

renderSlide={{({ slide, index }) => {
  return (
     <Carousel.Card
      paragraph={slide.paragraph}
      eyebrow={slide.eyebrow}
      heading={slide.heading}
      variant={'vertical-small'}
      imageBackgroundColor="$semantic.color.surface.container.secondary"
      onPress={() => {
        console.log(`card ${index + 1} pressed`);
      }}
    />);
}}}

Carousel Card

Use the Carousel.Card component to display content on a card with pre-defined styled specific for use within a carousel. It does not allow for multiple variants within the same carousel. Please follow design guidelines when implementing.

Carousel Nib

Use the Carousel.Nib component to display nibs within a carousel. Nibs are small, pill-shaped buttons that can be used for navigation or to represent different categories or options. They are typically used in a horizontal layout and can be scrolled through if there are more nibs than can fit on the screen at once.

Carousel Props

Prop Name	Type	Default	Description
actionText	string	-	Text for the action button
data	any[]	-	Each individual slide data stored in an array
disablePagination	boolean	false	Flag to remove pagination bullets
disableScrolling	boolean	false	Flag to disable carousel scrolling
onActionPress	function	-	Callback fired when the action button is pressed
renderSlide	function	-	Callback fired on slide render
slideGap	number	$carousel.space.slide-gap	The gap between each slide
snapPercentage	number	30	The minimum percent in either direction a carousel should be shifted to snap to another slide

Carousel Classes

Class Name	Description
abyss-carousel-bullets	Carousel bullets component
abyss-carousel-bullets-container	Carousel bullets container
abyss-carousel-root	Carousel root element
abyss-carousel-slide	Carousel slide

Carousel.Card Props

Prop Name	Type	Default	Description
background	"white" | "peach" | "mint" | "aqua" | "sky-blue"	white	The background color of the carousel card
eyebrow	string	-	The eyebrow text of the carousel card
heading	string	-	The heading text of the carousel card
image	React.ReactNode	-	The image of the carousel card
imageBackgroundColor	string	-	The background color of the image container
isExternal	boolean	-	Displays an external icon after the heading
paragraph	string	-	The paragraph text of the carousel card
variant	"horizontal" | "vertical-lg" | "vertical-sm" | "branded"	horizontal	The carousel card variant

Carousel.Card Classes

Class Name	Description
abyss-carousel-card-content	Carousel card content section
abyss-carousel-card-eyebrow	Carousel card eyebrow text
abyss-carousel-card-heading	Carousel card heading text
abyss-carousel-card-image-container	Carousel card image container
abyss-carousel-card-paragraph	Carousel card paragraph text
abyss-carousel-card-root	Carousel card root element

Carousel.Nib Props

Prop Name	Type	Default	Description
children	node	-	The contents of the Nib Group component
size	'small' | 'medium' | 'large'	small	The size of the nibs. Nibs in a list should use small, while nibs in a carousel can use medium or large
type	'list' | 'carousel'	list	The type of Nib group. This can either be a list or carousel

Carousel.Nib Classes

Class Name	Description
abyss-nib-label	The label element
abyss-nib-root	The root element

Pagination

When a screen reader is enabled, the pagination should not be shown. Be sure to set disablePagination prop to true.

Search tokens

Carousel Tokens

Token Name	Value
carousel.color.text.heading	#002677
carousel.color.icon.one-tap-alt	#4B4D4F
carousel.sizing.all.icon.one-tap-alt	24
carousel.sizing.all.icon.external	16
carousel.spacing.gap.horizontal.cards-container	8
carousel.spacing.gap.horizontal.heading-container	16
carousel.spacing.gap.vertical.container	8
carousel.spacing.padding.top.heading-container	24