vue-collage-slideshow

Responsive slideshow with animated collages for Vue.js. After given images are preloaded, component generates collages with different templates. Every slide can contain up to 5 pictures. Using transition animation, the component creates a different slide effects for every image in a collage (slide from the left/right/top/bottom). Collages are made in a way that vertical and horizontal images fit to container as best as possible. Slideshow takes up 100% of the container height.

Demo:

Check out the demo on jsFiddle

Installation:

Just use npm install --save vue-collage-slideshow

Set up:

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 | Whether 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 | Whether display the loader for images preloading or not | | loadingMsg | String | 'Loading...' | Define the text of the preloader message | | keyboardNavigation | Boolean | false | Enable arrows navigation and play/pause on space button |

Slots:

"loader" - slot to place loading message when images are loading

<template slot="loader">
    <div id="loader">Loading...</div>
</template>

"empty" - content to display when no items are present in the images array

<template slot="empty">
   <div id="no-images">No images</div>
</template>
           ```
## Contribution
Feel free to contribute on [GitHub](https://github.com/edicasoft/vue-collage-slideshow)