Vue

by khrome

HTML

<script src="vueperslides"></script>
<div class="splash">
        <vueper-slides autoplay slide-content-outside="top" :duration="4000">
            <vueper-slide
                v-for="(slide, i) in slides"
                :key="i"
                :image="slide.image"
                :title="slide.title"
                :content="slide.content"
                :link="slide.link"
                style="background-color: grey; color: white" />
            <template #pause>
                <i class="icon pause_circle_outline"></i>
            </template>
        </vueper-slides>
    </div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

let makeSlide = (slide)=>{
    let result = {};
    if((!slide.id) && slide.name) slide.id = slide.name.toLowerCase()
    Object.keys(slide).forEach((key)=>{
        switch(key){
            case 'title':
                result[key] = `<h2>${slide[key]}</h2>`;
                break;
            case 'content':
                result[key] = `
                    <div class="slide ${slide.id}">
                        <p>${slide[key]}</p>
                    </div>`;
                break;
            default:  result[key] = slide[key];
        }
    });
    return result;
}
let slides = [
    makeSlide({
        title: `Mangrove`,
        content: `Mangrove is a distributed data layer which can manage apps in
                    a number of forms, across many use cases.`,
        image: '/images/projects/mangroves-halftone.jpg'
    }),
    makeSlide({
        title: `Bespoke Software`,
        content: `A quote about it's awesomeness`,
        image: '/images/office.jpg'
    }),
    makeSlide({
        title: `Merch`,
        content: `<h3>Does your POS leave you exposed to the elements?</h3><br/>
                    <i>Purchase a complete register or build your own</i>.`,
        image: '/images/projects/parched-halftone.jpg'
    })
];


export default {
    name: 'WebIndex',
    props: {
        msg: String
    },
    components:{
        VueperSlides, VueperSlide
    },
    data:()=>{
        return {
            slides: slides
        }
    }
}