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 611 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. 1.495

Vue Carousel

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

Vueper Slides

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

Hooper

There it is, the slider with accessibility support ๐Ÿ˜‰ Hooper  301 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. 800

Vue Carousel 3D

This carousel 602 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. 10.470

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 1129. 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. 12.155

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 7921 – 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. 14.222

Similar Articles
Best Vue.js Datatables
16.09.2019  •  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 Notification Components
24.09.2018  •  in #UI Components
I've collected some of my favourite, versatile (and mostly lightweight) Vue.js Notification, Alert & Toast Components in this article!
Comments