Vue3 Marquee

Vue3 Marquee is a Vue 3 component designed to create smooth and customizable marquee animations easily. It's built with Vue 3 and TypeScript, offering a modern and efficient way to add marquee effects to your Vue projects.

Features

• Easy to use and integrate with Vue 3 projects.
• Supports horizontal and vertical marquee animations.
• Customizable speed and direction.
• Responsive and accessible.

Installation

npm install @mjakupi/vue-marquee
or
yarn add @mjakupi/vue-marquee

Props

• items: An array of items to be displayed in the marquee.
• speed: The speed of the marquee animation, with a default value of 20.
• direction: The direction of the marquee, which can be either 'horizontal' or 'vertical'.
• rtl: A Boolean indicating whether the marquee should display in reverse (right-to-left) order.
• outset: A numeric value specifying the outset of the marquee, with valid values ranging from -0.5 to 3.
• rtlOutset: A numeric value specifically for right-to-left (RTL) layouts, controlling the outset when rtl is true. The valid range is from -3 to -0.5.

Importing and Using the Component in Options API

<template>
  <Marquee :items="marqueeItems" :speed="50" direction="horizontal" :rtl="isRtl">
    <template v-slot="{ item }">
      <div>{{ item.text }}</div>
    </template>
  </Marquee>
</template>

<script>
import { Marquee } from "@mjakupi/vue-marquee";
import '@mjakupi/vue-marquee/dist/style.css'
export default {
  components: {
    Marquee
  },
  data() {
    return {
      marqueeItems: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
      ],
      isRtl: false
    };
  }
};
</script>

Composition API

<template>
  <Marquee :items="marqueeItems" :speed="50" direction="horizontal" :rtl="isRtl">
    <template v-slot="{ item }">
      <div class="marquee-content">{{ item.text }}</div>
    </template>
  </Marquee>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Marquee } from "@mjakupi/vue-marquee";
import '@mjakupi/vue-marquee/dist/style.css'
const marqueeItems = ref([
  { text: 'Item 1' },
  { text: 'Item 2' },
  { text: 'Item 3' }
]);
const isRtl = ref(false);
</script>

Contributing

Contributions are always welcome! Feel free to open an issue or submit a pull request.

License MIT License