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 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.
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.
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.)
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.
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!
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.
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.