0.2.8 • Published 3 years ago
vue-collage-slideshow v0.2.8
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 |
![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](https://github.com/edicasoft/vue-collage-slideshow)