Marquee-like Automatic Slider/Scroller Component For Vue - Marquee Slider

Install & Download:

# Yarn + Vue 2
$ yarn add vue-marquee-slider@latest
# NPM + Vue 2
$ npm i vue-marquee-slider@latest
# Yarn + Vue 3
$ yarn add vue3-marquee-slider@latest
# NPM + Vue 3
$ npm i vue3-marquee-slider@latest

Description:

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;
  },
},