Contact me
VueCollageSlideshow - Creating a Responsive “Sliding Panels” Slideshow for Vue.js

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:
 
Installation:
Simply use npm install --save vue-collage-slideshow
in your component:

import Slideshow from 'vue-collage-slideshow';

export default {
  ...
  components: {
    Slideshow
  }
  ...
};

Usage:

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

Props:

Props Type Default Description
images Array [] Array of Objects with a structure:
{image: "https://example.com/images/picture.jpg"}
height String '600px' Define the height of the slideshow container. Could be 100% etc
collageSizeMin Number 2 Define the minimum collage size (number of images that can be in one collage)
collageSizeMax Number 5 Define the maximum number of images that can be in one collage
slidesInterval Number 4000 Minimum is 1000 for better experience. Define the time in miliseconds before the next slide will be played
showNoImagesMsg Boolean true Whetere display "no images" text or not
noImagesMsg String 'No Images' Define the text of the message that shows up if there are no images
showLoadingMsg Boolean true Whetere display the loader for images preloading or not
loadingMsg String 'Loading...' Define the text of the preloader message

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!

12/04/2020

Most of the startups try to be like a swiss knife. It means, that they want to implement as many features as possible in their product.

12/04/2020

While the covid-19 affecting a different kind of businesses, Edicasoft continue working in the usual mode, as we are working remotely since founding at 2017.

12/04/2020

Most outsourcing IT companies don't have enough qualifications to work with startups, so usually, they don't give the quality value of the product and after the development, most part of MVP is just a cr*p that needs to be rewritten by the in-house team

Contacts