Top Vue.js Slider & Carousel Components 2020

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, just email me (armin@nifty.at).

last updated: 06.02.2020

Vue Slick Carousel

This component is a Vue rewrite of slick-carousel 26151 (aka "the last carousel you'll ever need") – it's a port of the React pendant react-slick 8871.

It is designed to support true SSR, so it aims at not weighing down the performance of your site. 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: Definitely worth a look!

Vue Agile

Vue Agile 1063 is a simple, responsive and touch-friendly component with the essential features of a slider. You can also define separate settings for different breakpoints.

It’s not fully accessible yet, but as it’s inspired by Slick, I guess accessibility support will follow as the component is developed further.

Vue Carousel

A solid slider that has a lot of fans 1467 even though it’s still in alpha. It’s touch-friendly and responsive, and supports dumping any content in your slides.

It supports autoplay, different navigation modes and speeds, looping and more customizations – it definitely has most carousel needs covered.

Vueper Slides

This library has been coming along great since last year 278. A lot of useful features were added, so I think it’s a very promising project.

It’s a responsive and touch-ready slideshow and carousel component built for Vue.js. It’s super customizable, supports single and multiple slides, and lets you put images as well as HTML into them. 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.

Super Vueper! (Sorry for that.)

Hooper

There it is, the slider with accessibility support 😉 Hooper  534 offers touch, keyboard, mouse wheel and navigation support.

It’s responsive, easily customizable and lets you create sliders with complex multiple item layouts. Also, it’s fully built for and with Vue.

Vue Carousel 3D

This carousel 735 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.

I wish I had this when I built the most complex carousel of my life 4 years ago!

Fullpage.js

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 1436. 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 commercial license – don’t worry though, they start at only £9 for lifetime access.

Vue Awesome Swiper

Swiper is a JS slider component, currently available in version 4. It's mostly intended for mobile use and got 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, the mobile HTML framework. You can also use it standalone with Vue Awesome Swiper 10622 – check out their demo page to see all the possible use cases.