Skip to content

Latest commit

 

History

History
89 lines (69 loc) · 2.09 KB

Carousel.mdx

File metadata and controls

89 lines (69 loc) · 2.09 KB

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs';

import Carousel from '../../components/Carousel'; import Alert from '../../components/Alert'; import { Default, WithSmallCards, WithLargeCards, WithEllipsisForLongTexts } from './Carousel.stories.jsx'; import { Header } from '../shared'; import EvaluationForm from '../../stories/shared/EvaluationForm'

Carousel is an interactive component that cycles cards of related content. Works with a series of image, text, or custom markup. Also includes support for indicator and previous / next controls.

Importing and usage

import Carousel from '@catho/quantum/Carousel';
Important:

The Carousel component uses{' '} react-slick lib as dependency. Therefore, it is necessary to implement the code of source bellow. It must be implemented before the imports in the unit tests that will use Carousel component.

Source: Issue in react-slick

Without this code, the unit tests will break.

The carousel controls (arrows) hides on screens smaller than 1024px.

API

Examples

With small cards

With large cards

With ellipsis for long texts