Vue Image Stack Gallery

Visit Vue Image Stack Gallery

This component started off as a challenge from a colleague. "How did they do this? Can you try and recreate it?"

Initially, I got to work creating the image stack gallery using modern JavaScript. After some sweat and tears, I managed to get a solid prototype up and running.

A couple of months later we fancied using it in a project and was a great opportunity to convert to Vue.js.

It was reasonably straightforward recreating the stack gallery as a Vue component (apart from a hard 30 minutes working out the order logic with a colleague).

It has the following properties available:-

  • Array of image object data (URL & alt text)
  • Direction of image stack - as the wind blows (sw -default, ne, nw)
  • The control indicator colour (dark - default)

<image-stack-gallery :images="imageStack" direction="ne" lightIndicators/>

This project really highlighted the magic reactivity of Vue.

Technical Sheet

Technologies & methodologies I used on this project.

  • Vue.js
  • Javascript

Interested in doing a project together?
Want to know more about what I do?

Lets chat