Slider Card Offer

The VSliderCardOffer component is a Vue 3 component that renders a slider with offer cards. It utilizes VSlider as the main slider container and VCarouselItem to wrap VCardOffer components. This component dynamically displays offer items provided via props.

Props

Prop	Type	Description
items	IOffer[]	An array of offer objects to be displayed in the slider.

Usage

vue

<script setup lang="ts">
import VSliderCardoffer from 'UiKit/components/VSlider/VSliderCardoffer.vue';
const offers: IOffer[] = [
  {
    id: 1,
    title: "Premium Investment Plan",
    description: "Get high returns with our premium investment plan.",
    image: "https://via.placeholder.com/300",
    amount: 50000,
    currency: "USD",
    funded: 75, // percentage funded
  },
  {
    id: 2,
    title: "Startup Growth Fund",
    description: "Invest in high-potential startups.",
    image: "https://via.placeholder.com/300",
    amount: 25000,
    currency: "USD",
    funded: 60,
  },
  {
    id: 3,
    title: "Real Estate Opportunity",
    description: "Exclusive real estate investment with stable returns.",
    image: "https://via.placeholder.com/300",
    amount: 100000,
    currency: "USD",
    funded: 90,
  },
  {
    id: 4,
    title: "Green Energy Investment",
    description: "Support sustainable energy projects.",
    image: "https://via.placeholder.com/300",
    amount: 75000,
    currency: "USD",
    funded: 50,
  },
  {
    id: 5,
    title: "Tech Innovation Fund",
    description: "Invest in cutting-edge technology companies.",
    image: "https://via.placeholder.com/300",
    amount: 40000,
    currency: "USD",
    funded: 80,
  }
];

</script>
<VSliderCardoffer
      :items="offers"
    />