Skip to main content

​
Overview

Images Slider is a full-page slider component with keyboard navigation support. Features customizable transitions, autoplay, and both horizontal and vertical sliding modes.

​
Usage

<template>
  <ImagesSlider
    :images="imageUrls"
    direction="vertical"
    :autoplay="5000"
  >
    <div class="overlay-content">
      Your overlay content here
    </div>
  </ImagesSlider>
</template>

​
API Reference

​
Props

Prop NameTypeDefaultDescription
imagesstring[][]An array of image URLs to show in the slider.
hideOverlaybooleanfalseDon’t create an overlay for the image slider. Slot won’t be rendered.
overlayClassstring''A class string to be applied to the overlay container.
imageClassstring'bg-cover bg-center bg-no-repeat'Class string to apply to each of the images.
enterFromClassstring'scale-0 origin-center'Class string applied to the ‘enter-from-class’ prop on the image transition.
enterActiveClassstring'transition-transform duration-300 ease-in-out'Class string applied to the ‘enter-active-class’ prop on the image transition.
leaveActiveClassstring'transition-transform duration-300 ease-in-out'Class string applied to the ‘leave-active-class’ prop on the image transition.
autoplayboolean|numberfalseAutoplay interval in ms, or false to disable.
direction'vertical'|'horizontal''vertical'The axis on which the slider should operate.
perspectivestring'1000px'The perspective to apply to the slider container.
modelValuenumber0Two-way binding for the current slide image index.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us