JS Cover Flow
HTML
<link rel="stylesheet" href="https://luwes.github.io/js-cover-flow/coverflow.css">
<div id="container" style="width:100%;height:100%;"></div>
<script src="https://luwes.github.io/js-cover-flow/coverflow.js"></script>
<script>
coverflow('container').setup({
item: 1,
playlist: [
{
"title": "snow-motion",
"description": "what a massive and unbelievable winter we're having!",
"image": "http://d3el35u4qe4frz.cloudfront.net/eawtAP1q-720.jpg",
"link": "http://www.google.com/",
"duration": "183"
},
{
"title": "driving rain",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/njZMLMwy-720.jpg",
"link": "http://luwes.co/",
"duration": "782"
},
{
"title": "winter brook",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/Vg7cPUdl-720.jpg",
"link": "http://twitter.com/",
},
{
"title": "winter brook",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/Vg7cPUdl-720.jpg",
"link": "http://twitter.com/",
},
{
"title": "winter brook",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/Vg7cPUdl-720.jpg",
"link": "http://twitter.com/",
},
{
"title": "winter brook",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/Vg7cPUdl-720.jpg",
"link": "http://twitter.com/",
},
{
"title": "winter brook",
"description": "",
"image": "http://d3el35u4qe4frz.cloudfront.net/Vg7cPUdl-720.jpg",
"link": "http://twitter.com/",
}
],
coverwidth: 300,
coverheight: 300,
fixedsize: true,
textoffset: 50,
backgroundcolor: 'FFFFFF'
});
coverflow('container').on('ready', function() {
coverflow('container').on('click', function(index, link) {
...