VueCollageSlideshow

Everyone loves a good slideshow. Whether for business presentations, speeches or simply home use, pictures in a slideshow can set the mood, draw attention, get points across and stir emotion more quickly and easily than words can. There is a reason why people still say “a picture is worth a thousand words”. If you’re wondering whether to create a “sliding panels” slideshow using Vue.js in an application you are working on, you should definitely do it! With app market saturation increasing, the need to stand out is clear, and image collages are one surefire way to do it. With mobile apps predicted to generate US$188.9 billion in revenue in the year 2020, an eye catching and professional display is key to getting a good slice of this growing pie. If you’re a designer, using the VueCollageSlideshow component can make the work you do for a client appear more professional and impressive.

In our dealings with clients, we get all sorts of specific requests, but one of our most recent tasks was to improve user engagement for a client who was using a photo presentation with their app. There were many images in the presentation and they were shown one by one, which took too much time. We hit upon the idea of grouping photos into animated collages, which would speed up the in-app presentation and give users a more immersive experience. There are many slideshow components for Vue.js, but none like the “sliding panels” slideshow for MacOS, which is what we needed at this point. From here our task became clear, to build a component that would allow us to create a slideshow collage in apps written with VueJs.

Once we knew what we had to do it was surprisingly easy to create a model for assembling photo collages. Although it only provides the basis for more complex processes, with a very tight schedule and some simple algorithms, we managed to deliver in time exactly what the client requested. VueCollageSlideshow allows you to select images and when they are preloaded, generate collages with different templates. For the moment, each slide has a limit of 5 pictures (this will change), and by using transition animation, animations are created randomly for you by the component, with different effects for every image in the collage. These collages are made in such a way that vertical and horizontal images tessellate, fitting within the prescribed area without being squashed or distorted. The slideshow takes up 100% of the container height.

Once created, using VueCollageSlideshow was an easy task; we were able to create a set of templates in an app that grouped and transitioned between photos to the delight of our client. Our job would have been completed at this point, but as I hinted at earlier, this component is still in the early stages of development. We wish to add video support, so that not only images can benefit from VueCollageSlideshow. Furthermore, while the slideshow is already able to be paused/resumed using the spacebar, we also plan to allow navigation using arrows, so that users can go back and forth with ease.

Installation & Usage:

If you’re a developer who would like to use VueCollageSlideshow in your projects, follow these instructions:

npm install --save vue-collage-slideshow

import Slideshow from 'vue-collage-slideshow';
export default {
  ...
  components: {
    Slideshow
  }
  ...
};

 <slideshow :images="images"
    :slidesInterval="4000" 
   height="600px">
</slideshow>

Props:

Contribution:

Please, feel free to contribute on GitHub

jsFiddle Demo:

If you have any questions about what you’ve read in this article or have a software problem you just can’t seem to get your head around, go to the Edicasoft main page and write to us!