Basic Cover Flow-style Image Carousel Plugin - Sliding Carousel

Sliding Carousel is a simple lightweight jQuery plugin that showcase your images in a cover flow-style carousel slider featuring realistic 3D perspectives and reflections.

How to use it:

1. Include jQuery library and the jQuery sliding carousel's CSS & JavaScript in the web page.

<link href="css/sliding-carousel.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery-slidingCarousel.js"></script>

2. Add your images with captions into the carousel slider.

<div id="carousel">
  <div class="slide"> <a href="#"><img class="carousel-image" alt="Image Caption" src="1.jpg"></a>
    <div class="carousel-caption">
      <p> Lorem ipsum dolor sit amet, consectetur elit. </p>
    </div>
  </div>
  <div class="slide"> <a href="#"><img class="carousel-image" alt="Image Caption" src="2.jpg"></a>
    <div class="carousel-caption">
      <p> Aliquam at tincidunt metus. </p>
    </div>
  </div>
  <div class="slide"> <a href="#"><img class="carousel-image" alt="Image Caption" src="3.jpg"></a>
    <div class="carousel-caption">
      <p> Donec pellentesque leo ac risus porta non rhoncus nisi vehicula. </p>
    </div>
  </div>
  <div class="slide"> <a href="#"><img class="carousel-image" alt="Image Caption" src="4.jpg"></a>
    <div class="carousel-caption">
      <p> Donec augue mi, ullamcorper vel placerat. </p>
    </div>
  </div>
  <div class="slide"> <a href="#"><img class="carousel-image" alt="Image Caption" src="5.jpg"></a>
    <div class="carousel-caption">
      <p> Curabitur nec dapibus neque. Aenean orci enim, rutrum ac lacinia in, dapibus sit amet lorem. </p>
    </div>
  </div>
</div>

3. Create a prev/next navigation beneath the carousel slider.

<div id="carousel-left"><img src="images/arrow-left.png"></div>
<div id="carousel-right"><img src="images/arrow-right.png"></div>

4. Initialize the plugin on document ready.

$("#carousel").slidingCarousel({

  // true for visible shadow, false otherwise.
  shadow: true,

  // slides "squeeze" ratio
  squeeze: 124,

  // duration of animated rotation
  animate: 250

});

Change log:

2015-03-11

• indentation fixed
• clicked images are shifted to the center

---

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