Coverflow-Style Image Carousel Plugin For jQuery - Carousel Evolution

An easy-to-use jQuery plugin to create an infinitely looping image carousel/slideshow with mouse wheel support, a little similar to the familiar 'cover flow' effect.

How to use it:

1. Include the jQuery Carousel Evolution plugin after jQuery library.

<link rel="stylesheet" href="style/carousel.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="scripts/jquery.carousel-1.1.min.js"></script>

2. Include the jQuery mousewheel plugin for mouse wheel support.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>

3. Markup Html structure.

<div class="carousel">

  <div class="slides">
  
    <div class="slideItem">
      <a href="#"> <img src="images/slide-1.jpg"> </a>
      <div class="shadow">
        <div class="shadowLeft"></div>
        <div class="shadowMiddle"></div>
        <div class="shadowRight"></div>
      </div>
    </div>

    <div class="slideItem">
      <a href="#"> <img src="images/slide-2.jpg"> </a>
      <div class="shadow">
        <div class="shadowLeft"></div>
        <div class="shadowMiddle"></div>
        <div class="shadowRight"></div>
      </div>
    </div>

    <div class="slideItem">
      <a href="#"> <img src="images/slide-3.jpg"> </a>
      <div class="shadow">
        <div class="shadowLeft"></div>
        <div class="shadowMiddle"></div>
        <div class="shadowRight"></div>
      </div>
    </div>

  </div>

</div>

4. Call the plugin on the container element.

$(document).ready(function(){
$('.carousel').carousel({
carouselWidth:930,
carouselHeight:330,
directionNav:true,
shadow:true,
buttonNav:'bullets'
});
});

5. All the default settings.

hAlign: 'center',
vAlign: 'center',
hMargin: 0.4,
vMargin: 0.2,
frontWidth: 400,
frontHeight: 300,
carouselWidth: 1000,
carouselHeight: 360,
left: 0,
right: 0,
top: 0,
bottom: 0,
backZoom: 0.8,
slidesPerScroll: 5,
speed: 500,
buttonNav: 'none',
directionNav: false,
autoplay: true,
autoplayInterval: 3000,
pauseOnHover: true,
mouse: true,
shadow: false,
reflection: false,
reflectionHeight: 0.2,
reflectionOpacity: 0.5,
reflectionColor: '255,255,255',
description: false,
descriptionContainer: '.description',
backOpacity: 1,
before: function(carousel) {},
after: function(carousel) {}

---

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