Overview
The Carousel component displays a horizontally scrollable list of items with navigation buttons, perfect for image galleries, product listings, or content previews.
Basic Usage
import Carousel from '@newtonschool/grauity';
function MyComponent() {
const items = [
<div>Item 1</div>,
<div>Item 2</div>,
<div>Item 3</div>,
<div>Item 4</div>,
];
return (
<Carousel
items={items}
title="Featured Items"
/>
);
}
items
React.ReactNode[]
default:[]
Array of React nodes to display as carousel items.
title
React.ReactNode
default:"null"
Title to display above the carousel.
Make items take up the full width of the container.
Number of pixels to scroll when navigation buttons are clicked.
Hide navigation icons when there are fewer items than the visible area.
Position of the navigation icon buttons.Available choices: left, right
leftIcon
grauityIconName
default:"chevron-left"
Icon for the left navigation button.
rightIcon
grauityIconName
default:"chevron-right"
Icon for the right navigation button.
Gap between navigation icon buttons in pixels.
iconButtonVariant
ButtonVariants
default:"secondary"
Visual variant of the navigation buttons.
iconButtonColor
ButtonColors
default:"neutral"
Color theme of the navigation buttons.
Callback when the left navigation button is clicked.
Callback when the right navigation button is clicked.
Callback when the carousel is scrolled to the end.
Gap between header and items row in pixels.
Gap between carousel items in pixels.
style
React.CSSProperties
default:"null"
Custom inline styles.
Additional CSS class name.
With Title
<Carousel
items={items}
title={<NSTypography variant="heading-sb-h4">Featured Products</NSTypography>}
/>
Custom Scroll Amount
<Carousel
items={items}
scrollAmount={200}
/>
Full Width Items
<Carousel
items={items}
fullWidthItems={true}
/>
Icon Position
// Icons on the right (default)
<Carousel
items={items}
iconPosition="right"
/>
// Icons on the left
<Carousel
items={items}
iconPosition="left"
/>
Custom Navigation Icons
<Carousel
items={items}
leftIcon="arrow-left"
rightIcon="arrow-right"
/>
Custom Button Styling
<Carousel
items={items}
iconButtonVariant="primary"
iconButtonColor="brand"
/>
Custom Gaps
<Carousel
items={items}
gap={24}
headerGap={16}
iconGap={8}
/>
With Callbacks
<Carousel
items={items}
onLeftClick={() => console.log('Left clicked')}
onRightClick={() => console.log('Right clicked')}
onScrollEnd={() => console.log('Reached the end')}
/>
Product Carousel Example
function ProductCarousel() {
const products = [
{ id: 1, name: 'Product 1', image: '/img1.jpg', price: '$29.99' },
{ id: 2, name: 'Product 2', image: '/img2.jpg', price: '$39.99' },
{ id: 3, name: 'Product 3', image: '/img3.jpg', price: '$49.99' },
// ... more products
];
const items = products.map(product => (
<div key={product.id} style={{ width: '200px' }}>
<img src={product.image} alt={product.name} />
<NSTypography variant="paragraph-sb-p3">{product.name}</NSTypography>
<NSTypography variant="paragraph-md-p3">{product.price}</NSTypography>
</div>
));
return (
<Carousel
items={items}
title={<NSTypography variant="heading-sb-h3">Featured Products</NSTypography>}
gap={16}
scrollAmount={220}
/>
);
}
Image Gallery
function ImageGallery() {
const images = [
'/gallery1.jpg',
'/gallery2.jpg',
'/gallery3.jpg',
'/gallery4.jpg',
];
const items = images.map((src, index) => (
<img
key={index}
src={src}
alt={`Gallery ${index + 1}`}
style={{ width: '300px', height: '200px', objectFit: 'cover' }}
/>
));
return (
<Carousel
items={items}
title="Photo Gallery"
scrollAmount={320}
gap={16}
/>
);
}