Top Vue.js Slider & Carousel Components 2021

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

So, before you use a carousel: Have you checked shouldiuseacarousel.com? 🙃

No, but seriously: If you’re sure you need a slider or 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/jQuery 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 Awesome Swiper  11679

Swiper is a JS slider component focused on a native mobile experience. It has great touch / native behaviour support, as well as hardware-accelerated transitions.

It uses flexbox for layouting, which is always a plus in my book as it makes all sizing settings easier. Swiper supports not only single- and multi-slide views, but also transition effects like cover flow, 3D cube or flip effects. Lazy loading, looping, autoplay..: also included.

It's part of Framework7 Vue, the mobile HTML framework. You can also use it standalone with Vue Awesome Swiper 11679 – check out their demo page to see all the possible use cases.

Vue Slick Carousel  526

Vue Slick Carousel is a Vue rewrite of slick-carousel 26954 (aka "the last carousel you'll ever need") – it's a port of the React pendant react-slick 9694.

It is designed to support SSR, and aims at being a performant solution. The author of the component also wrote up a comparison of the performance and SSR-support of other popular Vue sliders (including some in this article 👀).

Versatile layouts, customizable arrows and dots, performant: Worth a look!

Flicking for Vue  1654

Flicking is a flexible and extendable carousel component. It's based on TypeScript and comes with an official Vue 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 (like in this demo!).

Vue Agile  1224 

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.

❗️ Note: The project is currently not actively developed and is looking for a maintainer. It's a solid component as-is, but be mindful when you choose it.

Vueper Slides  375

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 as well as HTML. 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.)

Vue Carousel 3D  803

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.

Fullpage for Vue 1567

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.