A Vue.js scroller component that allows you to scroll through a list of items just like the traditional marquee tag. Can be used to create a smooth, seamless transition between any type of content, such as images, text, and cards.
The component is easy to customize, with a range of options that allow you to control the speed and direction of the scrolling, as well as the appearance of the items in the list.
How to use it:
1. Import and register the Marquee Slider component.
// Import import Vue from 'vue' import VueMarqueeSlider from 'vue-marquee-slider'; // Register Vue.use(VueMarqueeSlider)
2. Add a list of items to the Marquee Slider.
<vue-marquee-slider id="marquee-slider" > <img src="1.png" /> <img src="2.png" /> <img src="3.png" /> ... </vue-marquee-slider>
3. Available component props.
autoWidth: {
type: Boolean,
default: () => {
return false;
},
},
height: {
type: Number,
default: () => {
return 200;
}
},
id: {
type: String,
required: true,
default: () => {
return "id";
},
},
paused: {
type: Boolean,
default: () => {
return false;
},
},
repeat: {
type: Number,
default: () => {
return 10;
},
},
reverse: {
type: Boolean,
default: () => {
return false;
},
},
space: {
type: Number,
default: () => {
return 200;
},
},
speed: {
type: Number,
default: () => {
return 1500;
},
},
vertical: {
type: Boolean,
default: () => {
return false;
}
},
width: {
type: Number,
default: () => {
return 100;
},
},
Preview:
Changelog:
v1.0.5 (04/19/2023)
- feat: added vertical direction feature
Download Details:
Author: SchnapsterDog
Live Demo: https://vue-marquee.com/examples
Download Link: https://github.com/SchnapsterDog/vue-marquee-slider/archive/refs/heads/master.zip
Official Website: https://github.com/SchnapsterDog/vue-marquee-slider
Install & Download:
# Yarn + Vue 2
$ yarn add [email protected]
# NPM + Vue 2
$ npm i [email protected]
# Yarn + Vue 3
$ yarn add vue3-marquee-sl[email protected]
# NPM + Vue 3
$ npm i [email protected]