killer carousel example

HTML

<link rel="stylesheet" href="http://www.starplugins.com/sites/starplugins/js/killercarousel/killercarousel.css">
<script src="http://www.starplugins.com/sites/starplugins/js/killercarousel/killercarousel.js"></script>
<p>killer carousel docs: <a href="http://www.starplugins.com/killercarousel">http://www.starplugins.com/killercarousel</a></p>
<button id="prev">&lt;</button>
<button id="next">&gt;</button>
<span id="output"></span>

<div id="coverflow" 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

.kc-wrap {
  background: none;
  padding-bottom: 45%;
}

.kc-item {
  width: 364px;
  height: 205px;
  text-align: center;
}

.kc-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);
}

/* Removes "unlicensed" warning to see if improves mobile performance */

.kc-horizon+div {
  display: none !important;
}

</style>< !-- access to the HEAD element --><meta name="viewport" content="width=device-width, initial-scale=1" /><style>

JavaScript

$('#coverflow').KillerCarousel({
  frontItemIndex: 4,
  fadeEdgeItems: true,
  autoChangeDirection: 1,
  autoChangeDelay: 4000,
  infiniteLoop: true,
  // Width of carousel.
  width: 700,
  // Item spacing in 3d (CSS3 3d) mode.
  spacing3d: 130,
  // Item spacing in 2d (no CSS3 3d) mode. 
  spacing2d: 180,
  // Bottom shadows on.
  //showShadow: true,
  // Image reflections on.
  showReflection: false,
  // Scale at 100% of parent element.
  autoScale: 115,
  // Choose 'flow' style rendering modes for 3d and 2d.
  renderer3d: 'render3dFlow',
  renderer2d: 'render2dFlow',
  animStopCallback: function() {
    clearInterval(this.animating);
    getAlt();
  },
  animStartCallback: function() {
    this.animating = setInterval(function() {
      getAlt()
    }, 100);
  }
});

$('#next').on('click', function() {
  $('#coverflow').data('KillerCarousel').animateToRelativeItem(1);
});
$('#prev').on('click', function() {
  $('#coverflow').data('KillerCarousel').animateToRelativeItem(-1);
});

var getAlt = function(evt) {
  var kc = $('#coverflow').data('KillerCarousel');
  var i = kc.getFrontItemIndex();
  var $el = kc.getItemElement(i);

  var $img = $el.find('[alt]');
  $('#output').text($img.attr('alt'));
};
getAlt();