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.