vue-collage-slideshow

Responsive slideshow with animated collages for Vue.js

by dmykhailova

HTML

<script src="https://unpkg.com/[email protected]/dist/VueCollageSlideshow.umd.min.js"></script>
<div id="app">
  <vue-collage-slideshow 
                   :images="images"
                   :collageSizeMin="5"
                   :collageSizeMax="5"
                   :slidesInterval="4000"
                   :showNoImagesMsg="true"
                   noImagesMsg="No Images"
                   :showLoadingMsg="true"
                   loadingMsg="Loading..."
                   height="100%">
   </vue-collage-slideshow>
</div>
<style>
    html, body, #app{
        margin: 0;
        height: 100%;
    }
</style>

Vue

new Vue({
  el: "#app",
   components: {
            VueCollageSlideshow
        },
        data() {
            return {
                images: [
                    {image: "https://wallpapershome.com/images/pages/pic_v/5111.jpg"},
                    {image: "https://thumbor.forbes.com/thumbor/1280x868/https%3A%2F%2Fblogs-images.forbes.com%2Fannabel%2Ffiles%2F2018%2F02%2FLouisville_Skyline-1200x801.jpg"},
                    {image: "https://t-ec.bstatic.com/images/hotel/max1024x768/683/68345284.jpg"},
                    {image: "https://i.pinimg.com/originals/08/ec/94/08ec94ecf38048a2102ec4783dc88fa8.jpg"},
                    {image: "https://t-ec.bstatic.com/images/hotel/max1024x768/873/87316855.jpg"},
                    {image: "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Eiffel_Tower_Vertical.JPG/802px-Eiffel_Tower_Vertical.JPG"},
                    {image: "http://nexusandme.com/wp-content/uploads/2014/06/Ferris-Wheel.jpg"},
                    {image: "http://unmaskmycity.org/wp-content/uploads/2017/01/cityneighborhood.jpg"},
                    {image: "https://wallpapershome.com/images/pages/pic_v/660.jpg"},
                    {image: "http://www.manager.bg/sites/default/files/mainimages/20aa_29.jpg"},
                    {image: "https://www.squaremeal.co.uk/~/media/hero/area/city.jpg?useCustomFunctions=1&centerCrop=1"},
                    {image: "https://images.wallpaperscraft.com/image/road_marking_bridge_123398_1920x1080.jpg"},
                    {image: "https://stmed.net/sites/default/files/cities-wallpapers-28512-590093.jpg"},
                    {image: "https://img4.goodfon.com/wallpaper/nbig/b/d1/skyscrapers-building-architecture-vertical-night-lights-city.jpg"},
                    {image: "https://images.wallpaperscraft.com/image/architecture_city_view_from_above_buildings_river_118446_1920x1080.jpg"},
                    {image:...