Carousel
A flexible and responsive carousel component for showcasing features, content and ads for your / your partners apps. Supports titles, descriptions, background images, internal navigation, and external links with automatic slide transitions and navigation controls.
Usage
1. Import Dependencies
import { Bg1, Bg2, Bg3, Bg4 } from "../assets"
import Carousel from "../components/app/Carousel"2. Configure Slides
Create an array of slide objects. Each slide object can include these properties:
const slides = [
{
// The title displayed on the slide
title: "Your Slide Title",
// A detailed description or body text for the slide
description: "Your slide description goes here",
// The background image for the slide (import from your assets)
image: YourImageSource,
// Optional: Internal navigation link
link: {
url: "/your-internal-path",
text: "Your Link Text",
},
// Optional: External website link
externalLink: {
url: "https://external-website.com",
text: "External Link Text",
},
},
]3. Implement the Component
<Carousel slides={slides} />Example
const slides = [
{
title: "Streamlined Inventory Management",
description:
"Keep track of your stock levels in real-time and avoid overselling.",
image: Bg1,
link: {
url: "/features/inventory-management",
text: "Get started",
},
externalLink: {
url: "https://externalapp.com/inventory",
text: "Learn more",
},
},
// Add more slides as needed...
]
function MyComponent() {
return <Carousel slides={slides} />
}