3D Image Carousel / Slider Plugin For jQuery - jcImgScroll

jcImgScroll is a simple jQuery plugin for creating a 3D perspective image rotator / carousel similar to the familiar "cover flow" effect.

Features:

• Image loading indicator.
• Custom animation speed.
• Custom easing type. Requires jQuery easing plugin.
• Arrows navigation and bullets pagination.
• Auto generates captions from image's title attribute.

How to use it:

1. Load jQuery library and the jQuery jcImgScroll plugin in your web project.

<script src="jquery.min.js"></script>
<script src="js/jQuery-jcImgScroll.js"></script>

2. Insert your images into an Html list using path attribute instead of src.

<div id="demo" class="jcImgScroll">
  <ul>
    <li><a href="#" path="1.jpg" title="Image Caption 1"></a></li>
    <li><a href="#" path="2.jpg" title="Image Caption 2"></a></li>
    <li><a href="#" path="3.jpg" title="Image Caption 3"></a></li>
    ...
  </ul>
</div>

3. Add the following CSS styles into your CSS file.

.jcImgScroll {
  position: relative;
  height: 342px;
}

.jcImgScroll li { border: 1px solid #ccc; }

.jcImgScroll li a {
  background: #fff;
  display: block;
  height: 340px;
}

.jcImgScroll li.loading a { background: #fff url(img/loading.gif) no-repeat center center; }

.jcImgScroll li img,
.jcImgScroll li,
.jcImgScroll em,
.jcImgScroll dl { display: none; }

.jcImgScroll em.sPrev { background: url(img/arrow-left.png) no-repeat right center; }

.jcImgScroll em.sNext { background: url(img/arrow-right.png) no-repeat left center; }

.jcImgScroll dl dd {
  background: url(img/NumBtn.png) no-repeat 0 bottom;
  text-indent: -9em;
}

.jcImgScroll dl dd:hover,
.jcImgScroll dl dd.curr { background-position: 0 0; }

4. Call the plugin on the top element to active the 3D image carousel / rotator.

$(function(){
  $("#demo").jcImgScroll({/* options */});
});

5. Available options to customize the plugin.

// animation speed or easing type
speed : 400,

// width / height
width : 618,
height : 342,

// x offset
offsetX : 100,

// zoom level
setZoom : .7,

// css class for loading spinner
loadClass : "loading",

// position
position:"center",

// how many images shown in the carousel
count :5,

// navigation arrows
arrow : {
  width:110,  
  height:342,
  x:20,
  y:0
},

// enable pagination
NumBtn : false,

// pagination options
setNumBtn : {
  width : 19,
  height : 18,
  x : 0,
  y : 362
},

// enable image captions
title:true,

// options for image captions
setTitle : {
  height:35,
  border:8,
  bgColor:"#6ba600",
  color:"#fff",
  padding:20,
  opacity:.8
}

---

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