coverflowjs test

HTML

<script src="http://coverflowjs.github.io/coverflow/assets/js/coverflowjs/coverflow.js"></script>
<link rel="stylesheet" href="http://coverflowjs.github.io/coverflow/assets/js/coverflowjs/coverflow.css">
<script src="http://coverflowjs.github.io/coverflow/assets/js/jquery.mobile.custom.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<p>coverflowjs docs: <a href="http://coverflowjs.github.io/coverflow/api/options/">http://coverflowjs.github.io/coverflow/api/options/</a></p>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
<span id="output"></span>

<div class="ui-coverflow-wrapper">
<div id="coverflow" class="kc-wrap list wrapper ui-coverflow">
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/thematrix1999/thumbs/thumbs_thematrix_0581a.jpg" alt="The Matrix" />
    </div>
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/backtothefuture1985/thumbs/thumbs_backToTheFuture_0269a.jpg" alt="Back to the Future" />
    </div>
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/2001aspaceodyssey1968/thumbs/thumbs_2001ASpaceOdyssey_0610a.jpg" alt="2001" />
    </div>
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/requiemforadream2000/thumbs/thumbs_requiemForADream_039a.jpg" alt="Requiem for a Dream" />
    </div>
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/bladerunner1982/thumbs/thumbs_bladeRunner_025c.jpg" alt="Blade Runner" />
    </div>
    <div class="kc-item item">
        <img src="http://www.thefilmframes.com/wp-content/gallery/americanhistoryx1998/thumbs/thumbs_americanHistoryX_081a.jpg" alt="American History X" />
    </div>
    <div class="kc-item item">
        <img...

CSS

.ui-coverflow-wrapper {
    height: 480px;
}

.item {
    width: 196px;
    height: 110px;
}
.item img {
    max-width: 100%;
}
.item:after {
    content:'';
    position: absolute;
    bottom: -20px;
    left: 0;
    height: 2px;
    width: 100%;
    background: rgba(0,0,0,.3);
    border-radius: 100%;
    box-shadow: 0 0 4px 4px rgba(0,0,0,.3);
}
@media (min-width: 569px) {
    .item {
        width: 364px;
        height: 205px;
    }
}
</style>
<!-- access to the HEAD element -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>

JavaScript

// REFERENCE
// http://coverflowjs.github.io/coverflow/api/options/

// Extending jQuery UI Widget to override mousewheel behavior
// technique from https://gist.github.com/sgruhier/1086231
var _onMouseWheel = $.ui.coverflow.prototype._onMouseWheel;
var moddedMouseWheel = _.throttle(function(){
    _onMouseWheel.apply(this, arguments);
}, 200, {trailing: false});
$.widget("ui.coverflow", $.extend({}, $.ui.coverflow.prototype, {
    _onMouseWheel: function(event){
        var origEvent = event.originalEvent;
        
        event.preventDefault();
        moddedMouseWheel.apply(this, arguments);
    }
}));

var $coverflow = $( '#coverflow' ).coverflow({
    active: 4,
    duration: 200,
    scale: .7,
    overlap: .6,
    select : function( ev, ui ) {
        var el = ui.active,
            alt = $(el).find('[alt]').attr('alt');
        $('#output').text(alt);
        console.log('t');
    }
});
$('#prev').on('click', function(){
    $coverflow.coverflow('prev');
});
$('#next').on('click', function(){
    $coverflow.coverflow('next');
});

var animating = setInterval(function(){
    if ($('.ui-state-active').is(':last-child')) {
        $coverflow.coverflow('select',0);
    } else {
        $coverflow.coverflow('next');
    }
},4000);

$(window).on('resize', function(){
    $( '#coverflow' ).coverflow();
});