走马灯

A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/marquee.json"

在同一个文件中，复制并粘贴以下代码：

Marquee.vue

ReviewCard.vue

Prop 名称	类型	默认值	描述
`class`	`string`	`''`	Custom CSS classes to apply to the outermost container of the marquee.
`reverse`	`boolean`	`false`	Sets the scrolling direction to reverse (right to left or bottom to top).
`pauseOnHover`	`boolean`	`false`	Pauses the marquee animation when hovered.
`vertical`	`boolean`	`false`	Sets the scrolling direction to vertical instead of horizontal.
`repeat`	`number`	`4`	Number of times the content inside the marquee should be repeated.

Horizontal & Vertical Scrolling: You can scroll the content horizontally (default) or vertically with the vertical prop.
Reverse Direction: Enable reverse scrolling for dynamic effects using the reverse prop.
Pause on Hover: Pauses the scrolling animation when the user hovers over the marquee.
Content Repetition: The repeat prop controls how many times the content inside the marquee will loop.
Custom Duration and Gap: You can control the animation duration and gap between the repeated items using CSS variables --duration and --gap.

You can customize the speed and gap between the items by setting the following CSS variables:

Fully Customizable: Easily adjust the duration, gap, direction, and hover behavior to suit your needs.
Smooth Transitions: The component uses CSS keyframes to achieve smooth scrolling and transitions.
Multi-Directional: Scroll content either horizontally or vertically with a simple prop change.
Content Flexibility: Place any Vue components or HTML elements inside the marquee slot for dynamic content scrolling.

本页