sly example

HTML

<script src="http://darsain.github.io/sly/js/sly.min.js"></script>
<p>sly docs: <a href="https://github.com/darsain/sly/wiki/Options">https://github.com/darsain/sly/wiki/Options</a></p>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
<span id="output"></span>

<div id="coverflow" class="frame effects">
<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 src="http://www.thefilmframes.com/wp-content/gallery/baraka1992/thumbs/thumbs_baraka_0334a.jpg" alt="Baraka" />
    </div>
    <div class="kc-item item">
        <img...

CSS

.frame { width: 100%; padding: 30px 0; }
.list { margin: 0; padding: 0; height: 100%; list-style: none; }
.item { float: left; padding: 0; height: 100%;}
.item img { height: 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);
}

.effects {
	height: 110px;
	-webkit-perspective: 800px;
	-ms-perspective: 800px;
	perspective: 800px;
	-webkit-perspective-origin: 50% 50%;
	-ms-perspective-origin: 50% 50%;
	perspective-origin: 50% 50%;
	overflow-y: show;
}
.effects .list {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.effects .list .item {
	position: relative;
	margin: 0 -45px;
	-webkit-transform: rotateY(60deg) scale(0.8);
	-ms-transform: rotateY(60deg) scale(0.8);
	transform: rotateY(60deg) scale(0.8);
	-webkit-transition: -webkit-transform 300ms ease-out;
	transition: transform 300ms ease-out;
}
.effects .list .item.active {
	z-index: 10;
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.effects .list .item.active ~ .item {
	-webkit-transform: rotateY(-60deg) scale(0.8);
	-ms-transform: rotateY(-60deg) scale(0.8);
	transform: rotateY(-60deg) scale(0.8);
}

@media (min-width: 569px) {
    .effects {
        height: 205px;
    }
    .effects .list .item {
        margin: 0 -80px;
    }
}
</style>
<!-- access to the HEAD element -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>

JavaScript

var $frame = $('#coverflow');

// Call Sly on frame
$frame.sly({
    horizontal: 1,
    itemNav: 'basic',
    smart: 1,
    activateMiddle: 0,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 4,
    scrollBy: 1,
    speed: 300,
    elasticBounds: 1,
    easing: 'swing',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,
    cycleBy: 'items',
    cycleInterval: 4000, // Delay between cycles in milliseconds.
    pauseOnHover:  1, // Pause cycling when mouse hovers over the FRAME.
    keyboardNavBy: 'items',

    // Buttons
    prev: $('#prev'),
    next: $('#next')
},
{
    active: function(eventName, itemIndex){
        var alt = $(this.items[itemIndex].el).find('img').attr('alt');
        $('#output').html(alt);
    }
});

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