import { graphql } from 'gatsby';
import ComponentApi from '../../components/ComponentApi'; import ReactPlayground from '../../components/ReactPlayground'; import CarouselControlled from '../../examples/Carousel/Controlled'; import CarouselUncontrolled from '../../examples/Carousel/Uncontrolled'; import CarouselFade from '../../examples/Carousel/CarouselFade'; import IndividualIntervals from '../../examples/Carousel/IndividualIntervals';
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.
You can also control the Carousel state, via the
activeIndex prop and onSelect handler.
Add the fade prop to your carousel to animate slides with a fade transition instead of a slide.
You can specify individual intervals for each carousel item via the interval
prop.
export const query = graphqlquery CarouselQuery { carousel: componentMetadata(displayName: { eq: "Carousel" }) { displayName ...ComponentApi_metadata } item: componentMetadata(displayName: { eq: "CarouselItem" }) { displayName ...ComponentApi_metadata } caption: componentMetadata(displayName: { eq: "CarouselCaption" }) { displayName ...ComponentApi_metadata } };