Skip to content

Slider

Slides are passed as default slot content. Supports manual navigation and optional autoplay with configurable interval.

vue

<vs-slider :autoplay="true" :interval="3000">
  <div class="w-full h-64 bg-red-500 flex items-center justify-center text-white text-2xl">Slide 1</div>
  <div class="w-full h-64 bg-green-500 flex items-center justify-center text-white text-2xl">Slide 2</div>
  <div class="w-full h-64 bg-blue-500 flex items-center justify-center text-white text-2xl">Slide 3</div>
</vs-slider>
Slide 1
Slide 2
Slide 3
API

Props

PropTypeDefaultDescription
intervalnumber3000Time in milliseconds between slide changes during autoplay.
autoplaybooleanfalseEnable or disable automatic slide switching.

Auto play off

vue

<vs-slider :autoplay="false">
  <div class="w-full h-64 bg-red-500 flex items-center justify-center text-white text-2xl">Slide 1</div>
  <div class="w-full h-64 bg-green-500 flex items-center justify-center text-white text-2xl">Slide 2</div>
  <div class="w-full h-64 bg-blue-500 flex items-center justify-center text-white text-2xl">Slide 3</div>
</vs-slider>
Slide 1
Slide 2
Slide 3