Skip to main content

​
Overview

Marquee is a customizable scrolling component that continuously loops content. Supports both horizontal and vertical scrolling with pause on hover and configurable repetition.

​
Usage

<template>
  <Marquee
    :reverse="false"
    :pauseOnHover="true"
    :vertical="false"
    :repeat="4"
  >
    <ReviewCard v-for="item in items" :key="item.id" :item="item" />
  </Marquee>
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
classstring''Custom CSS classes to apply to the outermost container of the marquee.
reversebooleanfalseSets the scrolling direction to reverse (right to left or bottom to top).
pauseOnHoverbooleanfalsePauses the marquee animation when hovered.
verticalbooleanfalseSets the scrolling direction to vertical instead of horizontal.
repeatnumber4Number of times the content inside the marquee should be repeated.

​
CSS Variables

You can customize the speed and gap between the items by setting the following CSS variables:
  • --duration: Controls the speed of the marquee animation.
  • --gap: Sets the space between repeated items in the marquee.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us