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 25574 (aka "the last carousel you'll ever need") – it's a port of the React pendant react-slick 8393.

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-slick-carousel Vue Slick Carousel with True SSR
icon-eye-dark Created with Sketch. 3.281

Vue Agile

Vue-Agile 914 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-Agile Carousel Component
icon-eye-dark Created with Sketch. 10.401

Vue Carousel

A solid slider that has a lot of fans 1331 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.

Vue Carousel A flexible, responsive, touch-friendly carousel for Vue.js
icon-eye-dark Created with Sketch. 26.183

Vueper Slides

This library has been coming along great since last year 236. 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.)

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

Hooper

There it is, the slider with accessibility support 😉 Hooper  463 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.

Hooper Customizable & accessible carousel slider
icon-eye-dark Created with Sketch. 2.454

Vue Carousel 3D

This carousel 682 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!

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

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 1357. 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-fullpage.js The official vue-fullpage.js component for Vue.js
icon-eye-dark Created with Sketch. 14.178

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 Framework 7, the mobile HTML framework. You can also use it standalone with Vue Awesome Swiper 9682 – check out their demo page to see all the possible use cases.

Vue Awesome Swiper Swiper Component
icon-eye-dark Created with Sketch. 25.503

Similar Articles
Best Vue.js Datepickers
06.02.2020  •  in #UI Components
Why create a custom DatePicker yourself, if there are so many really great Vue.js components already? We've collected our favourite DatePickers based on whether they are well maintained, easy to use, look nice and provide a good UX. This list will gr...
Best Vue.js Datatables
22.01.2020  •  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.
COMMUNITY SPONSORS