BlogPlaygroundOne

VCarouselItem API

ads via vuetify

Props
name
type
default
absolute
boolean

false

Applies position: absolute to the component.

alt
string

undefined

Alternate text for screen readers. Leave empty for decorative images.

aspect-ratio
string | number

undefined

Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.

color
string

undefined

Applies specified color to the control - supports utility colors with or without text- prefix (for example success, purple or text-purple) or CSS color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page.

content-class
any

undefined

Apply a custom class to the internal content element.

cover
boolean

false

Resizes the background image to cover the entire container.

crossorigin
'' | 'anonymous' | 'use-credentials'

undefined

Specify that images should be fetched with CORS enabled MDN

disabled
boolean

false

Prevents the item from becoming active when using the “next” and “prev” buttons or the toggle method.

draggable
boolean | 'true' | 'false'

undefined

Controls the draggable behavior of the image. See MDN.

eager
boolean

false

Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.

gradient
string

undefined

The gradient to apply to the image. Only supports linear-gradient syntax, anything else should be done with classes.

height
string | number

undefined

Sets the height for the component.

image-class
any

undefined

Applies CSS classes to the inner <img> element.

inline
boolean

false

Display as an inline element instead of a block, also disables flex-grow.

lazy-src
string

undefined

Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.
NOTE: This prop has no effect unless either height or aspect-ratio are provided.

max-height
string | number

undefined

Sets the maximum height for the component.

max-width
string | number

undefined

Sets the maximum width for the component.

min-height
string | number

undefined

Sets the minimum height for the component.

min-width
string | number

undefined

Sets the minimum width for the component.

options
IntersectionObserverInit

{
  root: undefined,
  rootMargin: undefined,
  threshold: undefined
}

Options that are passed to the Intersection observer constructor.

position
string

undefined

Applies object-position styles to the image and placeholder elements.

referrerpolicy
  | 'origin'
  | 'no-referrer'
  | 'no-referrer-when-downgrade'
  | 'origin-when-cross-origin'
  | 'same-origin'
  | 'strict-origin'
  | 'strict-origin-when-cross-origin'
  | 'unsafe-url'

undefined

Define which referrer is sent when fetching the resource MDN

reverse-transition
string | boolean

undefined

Sets the reverse transition.

rounded
string | number | boolean

undefined

Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.

selected-class
string

undefined

Configure the active CSS class applied when an item is selected.

sizes
string

undefined

For use with srcset, see MDN.

src
  | string
  | { src: string; srcset: string; lazySrc: string; aspect: number }

The image URL. This prop is mandatory.
srcset
string

undefined
A set of alternate images to use based on device size. Read more….
tile
boolean

false
Removes any applied border-radius from the component.
transition
string | boolean

undefined
The transition to use when switching from lazy-src to src. Can be one of the built in or custom transition.
value
any

undefined
The value used when the component is selected in a group. If not provided, a unique ID will be used.
width
string | number

undefined
Sets the width for the component.
Slots
never

never

never

never

default
The default Vue slot.
error
Will be shown if the image fails to load, replacing the placeholder slot.
placeholder
Display an overlay while the image is loading.
sources
A list of <source> elements. If this slot is used v-img will render a <picture> instead of <img>.