Props
All the possible props for vue3-marquee are listed below.
direction
The direction for the content to move in. normal corresponds to elements moving left and reverse corresponds to elements moving right.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| String | normal | no | normal or reverse |
duration
The time taken for the marquee content to move the width of its own container (in seconds).
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Number | 20 | no | Number > 0 |
delay
A delay before the animation starts (in seconds).
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Number | 0 | no | Number >= 0 |
loop
The number of times that the marquee animation should run (0 corresponds to infinite).
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Number | 0 | no | Number >= 0 |
gradient
Whether to show a gradient overlay.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
gradientColor
The RGB colors for the color of the gradient.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Array of 3 RGB values | [255, 255, 255] | no | [0 <= Number <= 255, 0 <= Number <= 255, 0 <= Number <= 255] |
gradientLength Updated
gradientWidth and has been renamed to gradientLength to better reflect its purpose with both horizontal and vertical marquee animations.What portion of the container edges should be taken by the gradient overlay.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| String | 200px | no | Any valid css unit |
pause
A reactive prop to pause the marquee animation.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
pauseOnHover
Whether to pause the marquee on hover
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
pauseOnClick
Whether to pause the marquee when you hold the right click button.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
vertical
A prop to allow the marquee to scroll vertically.
examples for more info.| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
animateOnOverflowOnly New
A prop that allows the marquee to animate only when the content overflows its container.
vertical marquee animations. Since a fixed height parent container is required for vertical animations, this feature is not supported.justify-content css property to control the alignment of the content in this instance. View the link to the demo below for more info.| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
clone
Whether to clone the content. If you want no empty spaces in the animation use this option to auto clone fill content.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| Boolean | false | no | true or false |
gradientWidth Deprecated
gradientLength instead.What portion of the container edges should be taken by the gradient overlay.
| Type | Default value | Required | Accepted values |
|---|---|---|---|
| String | 200px | no | Any valid css unit |