Top Vue.js Slider & Carousel Components 2019

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: 05.07.2019

Vue Agile

Vue-Agile 563 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. 503

Vue Carousel

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

Vueper Slides

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

Hooper

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

Vue Carousel 3D

This carousel 547 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. 9.948

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 1045. 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. 11.669

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 7419 – check out their demo page to see all the possible use cases.

Vue Awesome Swiper Swiper component for Vue.js
icon-eye-dark Created with Sketch. 12.410

Similar Articles
Top Vue.js Chart Components
07.05.2019  •  in #UI Components
Choosing a chart component is not always an easy task. They have to fit your data, be beautiful, customizable, responsive, easy to implement.. 🤯 We have collected our favourite Vue.js chart components in this article!
The best Vue.js Admin Dashboards 2019
12.06.2019  •  in #UI Components
As admin dashboards usually rely heavily on JavaScript, it was just a matter of time until beautiful Dashboards & Templates built with Vue.js begin to emerge! In this post, you'll find a growing collection of free & premium Vue.js Admin Templates! Th...
Comments