Getting Started
vue-marquee-slider is a simple and easy-to-use component for Vue that allows you to create customizable marquees with just a few lines of code. It is a great option if you are looking for a lightweight and easy-to-use marquee component that works out of the box with Vue 2.
The component allows you to create a responsive, customizable, mobile-friendly carousel/slider to display images, text, and custom HTML content. It supports various features such as usage with images, text and cards, setting the width and auto width of the images, setting the speed and space between items, and setting the direction of the sliding items to be reversed.
Installation and Global Usage Vue2
If you are using npm:
If you are using yarn:
In order to register a component globally, you would typically need to import the component in your main application file. This would allow you to use the component in any of your Vue templates, without having to import it separately in each individual component.
Once you have registered the component, you can use it in any of your Vue templates by using the custom element syntax:
With loop:
Component Usage
Sometimes you will want to import the component separately in each individual component.
This allows you to have more control over the component and tailor it specifically for each individual component's needs. Importing the component separately also allows for better organization and separation of concerns in your codebase.
Available props
autoWidth
The prop autoWidth of the vue-marquee-slider component allows the width of each item in the slider to be automatically calculated based on the content of the item. This can be useful in cases where the items in the slider have varying lengths of text or other content, and you want to ensure that each item is displayed properly without being truncated or overlapping with other items. By setting this prop to
| Type | Required | Default |
|---|---|---|
| Boolean | No | False |
id
The prop id is required in the vue-marquee-slider component in order to uniquely identify the element on the page. This is necessary for proper functioning of the component, as it allows for proper event handling and state management.
| Type | Required | Default |
|---|---|---|
| String | Yes | marquee-slider |
paused
The paused prop is a boolean value that determines whether or not the marquee slider is paused. If paused is set to
| Type | Required | Default |
|---|---|---|
| Boolean | No | False |
repeat
The repeat prop is used to specify the number of times the marquee items should repeat before stopping. This prop can take an integer value.
| Type | Required | Default |
|---|---|---|
| Number | No | 10 |
reverse
The reverse prop in vue-marquee-slider is used to determine whether the marquee should move in a reverse direction. This can be useful for creating a backwards scrolling effect or for reversing the direction of the marquee when the user navigates to a different section of the website. This prop can be set to either
| Type | Required | Default |
|---|---|---|
| Boolean | False | False |
space
To add space between items in a vue-marquee-slider, you can use the space prop. The space prop allows you to specify the amount of space in pixels between each item in the slider.
| Type | Required | Default |
|---|---|---|
| Number | False | 200 |
speed
The speed prop in vue-marquee-slider allows users to set the speed at which the content in the slider will move. This can be set in miliseconds, allowing for precise control over the speed. The default value is 1500 ms, but this can be increased or decreased as needed.
| Type | Required | Default |
|---|---|---|
| Number | False | 1500 |
width
The width prop of each item in the vue-marquee-slider determines the width of the individual items within the slider. This prop can be useful for creating a consistent look and feel for the items in the slider, and for ensuring that they all fit within the designated space of the slider.
| Type | Required | Default |
|---|---|---|
| Number | False | 200 |
Examples
Visit the following link. There you will find various examples of how to use the vue-marquee-slider component in different ways, including different options for customizing the appearance and behavior of the slider.
These examples can help you understand the different features and options available with the vue-marquee-slider component, and how you can use them to create your own custom marquee sliders.