Top Vue.js Carousel & Slideshow Components 2021

Needing to build carousels have caused me some of the most painful moments of my freelance career. I have probably seen every version of them that designers can think of.

So, before you use a carousel: Have you checked 🙃

No, but seriously: If you’re sure you need a carousel, there are a lot of great options to choose from. There are some awesome libraries built with and for Vue that evolve nicely, as well as wrappers for popular JS libraries.

I'll keep the list updated, as I work my way through new components. If you think I should include one in particular, reach out on Twitter @MadeWithVueJS!

Vue Agile  1447 

  • ✅ Support for Vue 2 + 3

Vue Agile is a simple, responsive and touch-friendly component with all the essential features of a slider. Create fullscreen sliders, linked slideshows or other customized versions. You can also define separate settings for different breakpoints.

It has Nuxt.js SSR support and no jQuery dependency.

Vue Agile Carousel Component
icon-eye-dark Created with Sketch. 24.669

Flicking for Vue  2147

  • ✅ Support for Vue 2 + 3

Flicking is a flexible and extendable carousel component. It's based on TypeScript and comes with an official Vue 2 + 3 wrapper.

It offers various settings to optimize performance (always a concern with carousels) as well as animations and behaviours you can choose from.

It's pretty flexible, so you can use it for all kinds of custom sliding animations (see these demos!).

Vue Flicking Wrapper for the Flicking Carousel Component
icon-eye-dark Created with Sketch. 8.204

Vueper Slides  495

  • ✅ Support for Vue 2 + 3

Vueper Slides is a responsive and touch-ready slideshow & carousel component, built with Vue. It’s super customizable, supports single and multiple slides and lets you fill it with images, videos as well as HTML / Vue directives. You can also use some fun effects, like a parallax or 3D-effect.

I’m not a fan of the feel of the default drag behaviour, but it can be customized by adjusting the dragging distance.

It supports Vue 2 and 3.

Super Vueper! (Sorry for that.)

Vueper Slides Slideshow / Carousel Component
icon-eye-dark Created with Sketch. 33.722

Vue Carousel 3D  883

  • ⚡️ Vue 2 only

Vue Carousel 3D is a great choice if you need a slider to look like a cover flow component.

It offers a lot of customization possibilities when it comes to size, scaling, spacing and perspective, so it makes designers happy! It also handles HTML content as well as images.

3D-mode can also be disabled if you need a flat slider in between.

Vue Carousel 3D 3D Carousel
icon-eye-dark Created with Sketch. 25.648

Fullpage for Vue 1715

  • ⚡️ Vue 2 only

This is not really a slider, or is it? Fullpage.js lets you easily create fullscreen scrolling sites, and it has an official Vue wrapper. It has a sweet set of basic functionality (supporting f.ex. horizontal and vertical scrolling slides) but you can also enhance it with extensions for more effects like parallax views.

It’s incredibly easy to get started with, and the docs are great. I have used it to quickly prototype presentations, for example.

It’s free for open-source projects, else you’d have to buy a license.

Vue Fullpage.js Fullscreen Scrolling Websites
icon-eye-dark Created with Sketch. 19.741

Similar Articles
Best Vue.js Datatables 2022
23.02.2022  •  in #UI Components
Datatables are a complex beast. If you ever built data-heavy business applications, you will probably know it's not easy to make them readable and clear. Discover some of the best datatable components for Vue.js that are flexible enough to adapt to your data and use case.
Best Vue.js Datepickers & Calendars 2022
23.02.2022  •  in #UI Components
Why create a custom calendar yourself, if there are so many really great Vue.js components already? We've collected our favourite calendars & datepickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This l...