Basic sample with images With static width of the images Speed & Space between items Basic usage with text Cards inside vue-marquee-slider Reversed direction

Basic sample with images

HTML
        <vue-marquee-slider
  id="marquee-slider"
  :speed="15000"
>
  <img src="https://shorturl.at/d0459" />
  <img src="https://shorturl.at/eQXZ5" />
  <img src="https://shorturl.at/lqrW2" />
  <img src="https://shorturl.at/ghkoX" />
  <img src="https://shorturl.at/oqSZ8" />
</vue-marquee-slider>
    

With static width of the images

HTML
        <vue-marquee-slider
  id="marquee-slider-width"
  :speed="10000"
  :width="50"
>
  <img src="https://shorturl.at/d0459" />
  <img src="https://shorturl.at/eQXZ5" />
  <img src="https://shorturl.at/lqrW2" />
  <img src="https://shorturl.at/ghkoX" />
  <img src="https://shorturl.at/oqSZ8" />
</vue-marquee-slider>
    

Speed & Space between items

HTML
        <vue-marquee-slider
  id="marquee-slider-space"
  :space="50"
  :speed="10000"
  :width="150"
>
  <img src="https://shorturl.at/d0459" />
  <img src="https://shorturl.at/eQXZ5" />
  <img src="https://shorturl.at/lqrW2" />
  <img src="https://shorturl.at/ghkoX" />
  <img src="https://shorturl.at/oqSZ8" />
</vue-marquee-slider>
    

Basic usage with text

Schnapsterdog Vue.js Nuxt.js vue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-sliderSchnapsterdogVue.jsNuxt.jsvue-marquee-slider

HTML
        <vue-marquee-slider
  id="marquee-slider-text"
  :space="150"
  :speed="10000"
  :width="200"
>
  <span>Schnapsterdog</span>
  <span>Vue.js</span>
  <span>Nuxt.js</span>
  <span>vue-marquee-slider</span>
</vue-marquee-slider>
    

Cards inside vue-marquee-slider

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Easy to use

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

Pure Javascript

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

zero-dependancy

No Dependencies

This is a simple Vue 3 component with no external dependencies. All the styling is done with pure CSS.

HTML
        <vue-marquee-slider
  id="marquee-slider-cards"
  :space="50"
  :speed="12000"
  :width="420"
>
  <div>Some Cards</div>
  <div>Some Cards</div>
  <div>Some Cards</div>
</vue-marquee-slider>
    

Reversed direction

HTML
        <vue-marquee-slider
  id="marquee-slider-reverse"
  :space="50"
  :speed="10000"
  :width="150"
  reverse
>
  <img src="https://shorturl.at/d0459" />
  <img src="https://shorturl.at/eQXZ5" />
  <img src="https://shorturl.at/lqrW2" />
  <img src="https://shorturl.at/ghkoX" />
  <img src="https://shorturl.at/oqSZ8" />
</vue-marquee-slider>
    

44 %