Join our exclusive program and enjoy premium benefits.
Slider Card Primary
The VSliderCardPrimary component is a Vue 3 component that displays a slider with primary card components. It uses VSlider for the slider functionality, VCarouselItem to wrap each item, and VCardPrimary to represent the individual slides.
Props
| Prop | Type | Description |
|---|---|---|
| data | ICardPrimary[] | Array of primary card objects. |
Usage
vue
<script setup lang="ts">
import VSliderCardPrimary from 'UiKit/components/VSlider/VSliderCardPrimary.vue';
const primaryCards: ICardPrimary[] = [
{
id: 1,
title: "Exclusive Membership",
description: "Join our exclusive program and enjoy premium benefits.",
image: "https://via.placeholder.com/300",
buttonLabel: "Learn More",
buttonLink: "/membership",
},
{
id: 2,
title: "Investment Insights",
description: "Stay updated with expert investment strategies.",
image: "https://via.placeholder.com/300",
buttonLabel: "Read More",
buttonLink: "/insights",
},
{
id: 3,
title: "Tech Innovation",
description: "Discover the latest advancements in technology.",
image: "https://via.placeholder.com/300",
buttonLabel: "Explore",
buttonLink: "/technology",
},
{
id: 4,
title: "Real Estate Opportunities",
description: "Invest in high-value properties with strong returns.",
image: "https://via.placeholder.com/300",
buttonLabel: "Get Started",
buttonLink: "/real-estate",
},
{
id: 5,
title: "Green Energy Solutions",
description: "Support sustainable energy projects worldwide.",
image: "https://via.placeholder.com/300",
buttonLabel: "Invest Now",
buttonLink: "/green-energy",
}
];
</script>
<VSliderCardPrimary :data="primaryCards" />