Add a Cover Flow UI effect with the Vue Coverflow component

vue-coverflow

The vue.js community has created a lot of resources and plugins, and not only functional oriented but also styling and general appearance. The Vue Coverflow component simulates something like Apple's Cover Flow or Time Machine. Of course, there are other similar examples, but this one is as close as it gets, and you can have the UI effect, without using jQuery.

Apple's Cover Flow

Example

Installation

Chrome & Safari are only supported now.

Add the component to your Vue.js project

yard add vue-coverflow 

Then you can import it in your files in the scope of a single file or globally

app.vue file

import { coverflow } from 'vue-coverflow'

export default {
  data () {
    return {
      coverflowOption: {
        coverList: [
          {cover: 'URL', title: 'Cool Image'},
          {cover: '...', title: 'NaN'},
          {cover: '...', title: 'NaN'},
          {cover: '...', title: 'Batman'}
        ],
        coverWidth: '460px',
        coverSpace: '5px',
        width: 920,
        index: 2
      }
    }
  },
  components: {
    coverflow
  }
}

You must set coverList in your data inside the coverflowOption object, otherwise, it won't work! There are other options to you can set, find them here. Take note of the width & index they require a number and not a string, but some may work in both.

Template

<coverflow :options="coverflowOption"></coverflow>

Everytime you change the options you should refresh the page because reload can trigger window.onload.

That's it! For more information and the source code visit the GitHub repository.