# Testimonial Marquee

> An infinite scrolling marquee of testimonial cards with smooth animation.

<demo-testimonial-marquee>



</demo-testimonial-marquee>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/testimonial-marquee.json"
```

## Usage

```vue
<script setup lang="ts">
  import TestimonialMarquee from '~/components/ui/testimonial-marquee/TestimonialMarquee.vue';

  const items = [
    {
      name: 'Sarah Chen',
      text: 'Amazing library!',
      avatar: '/avatars/sarah.jpg',
    },
    { name: 'Alex Morgan', text: 'Best DX ever.', avatar: '/avatars/alex.jpg' },
  ];
</script>

<template>
  <TestimonialMarquee :items="items" :speed="30" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        pause-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Pause animation when hovering
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        40
      </code>
    </td>
    
    <td>
      Animation speed in pixels per second
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        'left' | 'right'
      </code>
    </td>
    
    <td>
      <code>
        'left'
      </code>
    </td>
    
    <td>
      Direction of marquee animation
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>