Examples

Some examples of how to use the library are shown below.

Text marquee

<template>
    <Vue3Marquee>
        <span
            v-for="(word, index) in helloArray"
            :key="index"
        >
            {{ word }}
        </span>
    </Vue3Marquee>
</template>
<script setup>
import 'vue3-marquee/dist/style.css'
const helloArray = ['hello', 'こんにちは', 'bonjour', ...]
</script>

Image marquee

<template>
    <Vue3Marquee>
        <img
            v-for="img in imgArray"
            :key="img"
            :src="img"
        />
    </Vue3Marquee>
</template>
<script setup>
const imgArray = [
    'https://sponsors.vuejs.org/images/vueschool.avif',
    'https://sponsors.vuejs.org/images/vehikl.avif',
    'https://sponsors.vuejs.org/images/dronahq.avif',
    ...
]
</script>

::

Cards marquee

<template>
    <Vue3Marquee>
        <div class="card" v-for="avatar in avatarArray" :key="avatar">
            <img :src="avatar" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
    </Vue3Marquee>
</template>
<script setup>
import 'vue3-marquee/dist/style.css'
const avatarArray = reactive([])
for (let i = 0; i < 5; i++) {
    avatarArray.push(
        `https://avatars.dicebear.com/api/avataaars/${Math.random()
        .toString(36)
        .substr(2, 6)}.svg`
    )
}
</script>

::

Image marquee with a gradient

You can add a gradient to the marquee so that the sides of the marquee are more pleasant to look at.

In this example the following props are used:

  • gradient: true
  • gradientColor: [255, 255, 255] (light)
  • gradientColor: [0, 0, 0] (dark)
  • gradientWidth: 30%
<template>
    <Vue3Marquee
        :gradient="true"
        :gradient-color="colorMode.value === 'light' ? [255, 255, 255] : [0, 0, 0]"
        gradient-width="30%"
    >
        <img
            v-for="img in imgArray"
            :key="img"
            :src="img"
        />
    </Vue3Marquee>
</template>
<script setup>
const colorMode = useColorMode()
const imgArray = [
    'https://sponsors.vuejs.org/images/vueschool.avif',
    'https://sponsors.vuejs.org/images/vehikl.avif',
    'https://sponsors.vuejs.org/images/dronahq.avif',
    ...
]
</script>

::

Card marquee with pauseOnHover

The marquee can pause when you hover over the content. This is useful if you want the ability to run additional actions inside the content. For this example the pauseOnHover prop is used.

<template>
    <Vue3Marquee :pause-on-hover="true">
        <div class="card" v-for="avatar in avatarArray" :key="avatar">
            <img :src="avatar" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
    </Vue3Marquee>
</template>
<script setup>
import 'vue3-marquee/dist/style.css'
const avatarArray = reactive([])
for (let i = 0; i < 5; i++) {
    avatarArray.push(
        `https://avatars.dicebear.com/api/avataaars/${Math.random()
        .toString(36)
        .substr(2, 6)}.svg`
    )
}
</script>

::

Image marquee with pauseOnClick

You can also use the right click button to momentarily pause the animation. Hold the right click button to pause the animation. Releasing the mouse button will resume the animation. In this example the pauseOnClick prop is used.

If you need more functionality than this, using a carousel component might be better for your use case. Two that I would suggest are the vue3-carousel or egjs/vue-flicking.
<template>
    <Vue3Marquee :pause-on-click="true">
        <img
            v-for="img in imgArray"
            :key="img"
            :src="img"
        />
    </Vue3Marquee>
</template>
<script setup>
const imgArray = [
    'https://sponsors.vuejs.org/images/vueschool.avif',
    'https://sponsors.vuejs.org/images/vehikl.avif',
    'https://sponsors.vuejs.org/images/dronahq.avif',
    ...
]
</script>

::

Listening for events

This animation is playing.

<template>
    <Vue3Marquee
        :pause-on-hover="true"
        @on-pause="playState = 'paused'"
        @on-resume="playState = 'playing'"
    >
        <div class="card" v-for="avatar in avatarArray" :key="avatar">
            <img :src="avatar" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua.
            </p>
        </div>
    </Vue3Marquee>
    <p>
        This animation is {{ playState }}.
    </p>
</template>
<script setup>
import 'vue3-marquee/dist/style.css'
const playState = ref('playing')
const avatarArray = reactive([])
for (let i = 0; i < 5; i++) {
    avatarArray.push(
        `https://avatars.dicebear.com/api/avataaars/${Math.random()
        .toString(36)
        .substr(2, 6)}.svg`
    )
}
</script>

::

Cloning content

If your marquee content is too small to take the width of the full container it will leave an empty space.

This feature is still experimental. If you have any issues with this option I would suggest you to have content that is wider than your container or make a duplicate of the content if possible.

You can use the clone prop to workaround this issue. With this option, vue3-marquee will automatically calculate the content and container widths and clone your content to fill the container completely.

This option is also responsive to the container width. If you resize the window, the content will be cloned again to fill the container.
<template>
    <Vue3Marquee :clone="true" :duration="5" :direction="'reverse'">
        <img
            v-for="img in imgArray"
            :key="img"
            :src="img"
        />
    </Vue3Marquee>
</template>
<script setup>
const imgArray = [
    'https://sponsors.vuejs.org/images/layer0.avif',
    'https://sponsors.vuejs.org/images/plaid__inc_.svg',
]
</script>

::

Disclaimer

Edit this page on GitHub
Table of Contents