vue-collage v0.1.6
vue-collage
Responsive collages with animated images 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. Collages take up 100% of the container height.
Credits:
This component is just a stripped-down version of vue-collage-slideshow from edicasoft, removing the slideshow/carousel components and randomization of the number of images shown (will default to collageSizeMax or images.length, whichever is greater.
Demo:
Check out the demo on jsFiddle
Installation:
Just use npm install --save vue-collage
Set up:
import Collage from 'vue-collage';
export default {
...
components: {
Collage
}
...
};Usage:
<collage :images="images" height="600px">
</collage>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 |
| 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 |
![https://example.com/images/picture.jpg"}](https://example.com/images/picture.jpg"}){kind=link}
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