<img src="/img/vue-image-stack-gallery.jpg" alt="Image Stack Gallery" title="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:-
<ul>
<li>Array of image object data (URL &#x26; alt text)</li>
<li>Direction of image stack - as the wind blows (sw -default, ne, nw)</li>
<li>The control indicator colour (dark - default)</li>
</ul>
<code>&#x3C;image-stack-gallery :images="imageStack" direction="ne" lightIndicators/></code>
This project really highlighted the magic reactivity of Vue.
You can view <a href="https://github.com/matt-harris/vue-image-stacking-gallery">Image stacking gallery on GitHub</a>.
<a href="http://vue-image-stack-gallery.surge.sh/">Take a look!</a>
<h2>Technical Sheet</h2>
Technologies &#x26; methodologies I used on this project.
<ul>
<li>Vue.js</li>
<li>Javascript</li>
</ul>

Image Stack Gallery

Technical Sheet

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

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