flipster example

HTML

<script src="https://raw.githack.com/drien/jquery-flipster/master/src/js/jquery.flipster.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/drien/jquery-flipster/master/src/css/jquery.flipster.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js"></script>
<p>flipster docs: <a href="https://github.com/drien/jquery-flipster">https://github.com/drien/jquery-flipster</a></p>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
<span id="output"></span>

<div id="coverflow" class="outer">
<div class="kc-wrap list">
    <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 src="http://www.thefilmframes.com/wp-content/gallery/transformersrotf2009/thumbs/thumbs_transformers2_0330f.jpg" alt="Transformers 2" />
    </div>
    <div class="kc-item item">
        <img...

CSS

.flipster {
    padding-bottom: 50px;
}
.item {
    width: 196px;
    height: 110px;
    text-align: center;
}
.item img {
    pointer-events: none;
    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);
}

.flip-item,
.flipster-carousel .flip-prev,
.flipster-carousel .flip-next {
  opacity: 1;
}
@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

$("#coverflow")
    // Set up flipster
    .flipster({
        style: 'infinite-loop',
        start: 4,
        itemContainer: '.list',
        itemSelector: '.item',
        onItemSwitch: function(){outputAltText()}
    })
    // Override default mousewheel behavior
    .off('mousewheel.flipster')
    .on('mousewheel.flipster', function(e){
        e.preventDefault();
        mousewheeNavThrottler($(this),e);
    });

// Bind UI
$('#next').on('click',function(){
    $('#coverflow').flipster('jump','right');
});
$('#prev').on('click',function(){
    $('#coverflow').flipster('jump','left');
});

// Functions
var outputAltText = function(){
    var alt = $('.flip-current').find('[alt]').attr('alt');
    $('#output').text(alt);
};

var basicCycler = setInterval(function(){
    $("#coverflow").flipster('jump','right');
},4000);

var mousewheelNav = function($target,event){
    if ( event.originalEvent.wheelDelta /120 > 0 ) {
        $target.flipster('jump','left')
    } else {
        $target.flipster('jump','right')
    }
};
var mousewheeNavThrottler = _.throttle(mousewheelNav, 400, {trailing: false});