How-To: A Simple Carousel With Vue!
Or, What I Learned Building My Own Carousel.
Carousels, slideshows, or perhaps just “slider”. This ubiquitous UI component has earned its’ place in web-design and as such there are a plethora of implementations in various technologies.
You’ll find that Vue.js is no different.
But!
Before you npm install yet-another-dependency I implore you to consider the power already at your disposal given an out of the box Vue project.
Enter…
The transition-group
Those coming from React may be familiar with the concept of a transition group. Rather than being an add-on, the transition-group (for better or worse) is pre-packaged with Vue and indeed the rich transition API is immediately available after a fresh installation.
For those unfamiliar, a transition-group is similar to a transition wrapper component — both allow for animation of the removal, addition, and (in the case of a transition-group) the movement of elements within themselves.
We’ll dive deeper into thetransition-group in a minute but first let’s introduce, and pay homage to what makes building your own carousel EASY.
FLIP and Freedom (from another package)
So, what makes a carousel? You have a large element (typically an image) that slides in and out of focus (or view). Put simply, the seamless movement of one element to another position is arguably the most important part. If you sniff around the transition section of the Vue docs, you’ll see some rather snazzy animations.
Per the docs…
This might seem like magic, but under the hood, Vue is using a simple animation technique called FLIP to smoothly transition elements from their old position to their new position using transforms.
And this is our ticket to one-less-dependency land. The built in FLIP technique already provides us with the bread and butter of what makes a carousel a carousel!
Disclamer!
Before we start, I’d like to emphasize on the word simple in the title.
We are talking bare-bones-2d-carousel. One that would be immediately recognized by any current user of the world wide web. Not at all dissimilar to this bootstrap carousel found here.
There are no fancy bells and whistles, and we aren’t implementing touch-slide functionality. This article just outlines a potential foundation for a carousel.
With that out of the way…
Getting Started
To kick things off quickly we’re gonna put in our rad terminal cheat codes AKA using the officially supported Vue scaffolding tool.
The webpack-simple template is particularly useful for quick prototypes and as such is perfect to get things going.
Once we’re up and running, we’ll start out with App.vue
So nice. Ok let’s delete this and start fresh.
And modify app.js accordingly…
And now we’re at a fresh start:
Ok, great.
The <template></template>
In our Carousel.vue file, we can very well throw in some mark up like this:
And perhaps now you very well have done that.
Our key player, the transition-group, has a tag property allowing us to have it render as a div (rather than the default span). We also give it a class name, and neatly place our slide div inside it.
Utilizing the v-for directive on the slide, we accomplish reactive list rendering and are sure to pass a :key for each slide so that Vue can keep track of each node. Keeping things simple, each slide will display it’s title using {{ slide.title }} inside a h4 element.
Following the meat and potatoes, we throw in some controls to get this thing scrolling.
And that’s about it for the markup!
The <script></script>
We’re operating pretty lightly on the <script> side of things as well. Here we are supplying a simple list of objects in data and just two methods: next and previous. This code simply shifts and wraps the list either left (next) or right (previous).
You’ll notice we’re using methods that modify the array in-place (shift, and pop) along with a method that returns an entirely new array (concat). Because of this we are replacing the slides array entirely which, thankfully, Vue handles just fine.
At this point, if we run:
npm run dev
You can see we have a very boring list.
Most of the work we’ll be doing is in…
The <style></style>
You’ll notice we set the width of the .carousel to about the size of one slide to create our carousel ‘viewport’ along with overflow: hidden.
Mostly we have non-functional styling here save for two important parts:
transition: transform 0.3s ease-in-out;This tells Vue’s FLIP implementation how to animate when the elements move..slide:first-of-typeand.slide:last-of-typethese allow the last and first element to be hidden as we shift the array left or right, otherwise we would see them fly across (which is kinda fun but not a proper feature of a carousel).
And that’s it!
Conclusion
We’ve quickly put together one of the most ubiquitous UI elements on the web in just about no time at all thanks to the implementation of FLIP within Vue’s transition-group.
It may not be the smooooothest carousel, or the flashiest but it gets the job done and there’s always the satisfaction of creating your own carousel without bloating your node-modules anymore than it has to be.
If you have suggestions about how to improve this approach or any feedback at all, I would love to hear it!
You can find the code for this project HERE and the code for the cat carousel at the beginning of this article can be found HERE
