Vue carousel and media components

Carousels, galleries, video embeds and visual effects add movement and imagery to a page, and they are also where performance and motion problems tend to creep in. These Vue 3 media components handle lazy loading, touch input and reduced motion.

They are built with Tailwind CSS 4, support class-based dark mode and need no dependencies besides vue. Install them with npm or copy the source and adjust the effects to taste.

2 components

Preview of CarouselFree

Component · Media & effects

Carousel

Carousel is a flexible Vue component for showcasing content with smooth horizontal or vertical rotation. Designed for both simplicity and style, it lets you present images, cards, or custom elements in an engaging, interactive way that adapts to any layout.

Preview of TiltFree

Component · Media & effects

Tilt

Tilt is an interactive Vue component that brings depth and motion to any element. It reacts smoothly to mouse movement, tilting toward the pointer while casting dynamic shadows, creating a realistic 3D effect that makes your UI feel more alive and engaging.

by Steffan Halvorsen

Good to know

Building media & effects that hold up

Use CSS scroll snap for carousels
A horizontal flex row with snap-x and snap-mandatory gives you swipe, momentum and keyboard scrolling from the browser. JavaScript is then only needed for arrows and indicators.
Respect reduced motion
Wrap animations in motion-safe: variants or check prefers-reduced-motion before autoplaying. Autoplaying carousels also need a visible pause control.
Lazy load offscreen media
Use loading="lazy" on images and iframes below the first screen, and set width and height or an aspect-ratio class so the layout does not jump when they load.
Load video embeds on demand
Show a poster image and only insert the iframe when someone clicks play. Third-party players are heavy and slow down the initial page load.

FAQ

Questions

Do these carousels need a slider library?

No. They use CSS scroll snap plus a small amount of Vue for controls, so there are no dependencies besides vue.

Are the animations accessible?

Animations respect prefers-reduced-motion, and anything that moves automatically can be paused.

More component categories

Pro feature

Upgrade to Pro

Upgrade to unlock more of Vueplay. Cancel any time.

  • Custom domains with HTTPS
  • Private projects
  • No "Made with Vueplay" badge
  • GitHub sync

$120/year

Compare plansBilling settings