Cover Flow-style Image Carousel/Slider with jQuery and jQuery UI

Creating a cross-browser and fully customizable cover flow-style image carousel/slider with jQuery and jQuery UI, featuring realistic 3D image perspectives and reflections.

How to use it:

1. Load the necessary jQuery and jQuery UI in your document.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-darkness/jquery-ui.css"> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

2. Load the jQuery UI Coverflow's JS and CSS in the document.

<link href="css/jquery-ui-coverflow.css" rel="stylesheet">
<script src="js/jquery-ui-coverflow.min.js"></script>

3. Load the jQuery UI Slider widget's CSS in the document.

<link href="css/slider.css" rel="Stylesheet">

4. Add your images into a container that has the class "coverflow".

<div id="coverflow" class="coverflow">

  <div class="controls">
    <a id="previous" title="Previous Cover">&lsaquo;</a>
    <a id="next" title="Next Cover">&rsaquo;</a>
  </div>

  <img src="1.jpg" alt="Alt 1" data-subtitle="Subtile 1" data-title="Title 1">
  <img src="2.jpg" alt="Alt 2" data-subtitle="Subtile 2" data-title="Title 2">
  <img src="3.jpg" alt="Alt 3" data-subtitle="Subtile 3" data-title="Title 3">
  <img src="4.jpg" alt="Alt 4" data-subtitle="Subtile 4" data-title="Title 4">
  <img src="5.jpg" alt="Alt 5" data-subtitle="Subtile 5" data-title="Title 5">
  ...

</div>

5. Initialize the 'cover flow' carousel.

$(function () {

  var $demo = $("#coverflow").coverflow();

  $("#previous").click(function () {
      $demo.coverflow("prevCover");
  });

  $("#next").click(function () {
      $demo.coverflow("nextCover");
  });

});

6. Full plugin options.

id: (new Date()).getTime() * Math.random(),
width: 300,
height: 300,
patchSize: 70,
perspective: {
  angle: 0,
  enabled: true,
  position: "center"  // (left|center|right)
},
subdivisionLimit: 3,
animation: {
  slide: {
    duration: 900,
    easing: "easeOutCirc"
  },
  perspective: {
    duration: 120,
    easing: "swing"
  }
},
canvas: {
  background: "white",
  left: 0,
  top: 0,
  zIndex: 0,
  opacity: 1
},
reflection: {
  enabled: true,
  initialOpacity: 50, // percentage 0(transparent) <=> 100(opaque)
  length: 80    // percentage of original image
},
title: {
  enabled: true
}

---

This awesome jQuery plugin is developed by planettelex. For more Advanced Usages, please check the demo page or visit the official website.