jQuery Carousel Image Gallery with Cover-flow Effect - jqcarousel

jqcarousel is a jQuery plugin for creating a 'cover flow' like image gallery with infinite rotation support. Click the 'centered' image will enlarge it in a modal box with a close button. Also comes with lots of options & methods to customize the carousel image gallery to suit for your needs.

Basic Usage:

1. Include the required jQuery & jQuery UI javascript libraries in the page.

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

2. Make sure to include the jqcarousel.js after jQuery library.

<script src="src/jqcarousel.js"></script>

3. Wrap the images in a wrapper.

<div id="gallery"> 
<img src="images/1.png" alt="" /> 
<img src="images/2.png" alt="" /> 
<img src="images/3.png" alt="" /> 
...
</div>

4. Call the plugin with default settings.

<script type="text/javascript">
$(window).load(function () {
$('#gallery').jqcarousel();
});
</script>

5. Available options.

// Setting carousel's eccentricity.
eccentricity: 0.99 

// Setting carousel's focus distance.
focus: 300 

// Setting the duration of the images rotation.
animationDuration: 700 

// Setting if the opacity of the images during the rotation is going to be changed.
opacity: true 

// Setting if the size of the images during the rotation is going to be changed.
resize: true 

// Setting the angle of the carousel.
angle: 0 

// Setting the minimum opacity of the images.
// This property is useful only if the opacity property is true.
minOpacity: 0.2

// Setting ratio which is going to control the minimum size of the images. 
// This property is useful only if resize property is true.
minSizeRatio: 0.3 

// Setting if the keyboard navigation is enabled.
keyboardNavigation: true 

// Setting the maximum size of the images into the carousel.
imageWidth: 300 

// Setting the carousel rotation direction. 
// Possible values are 'shortest', 'cw', 'ccw'.
direction: 'shortest' 

// Setting the size of the enlarged image.
enlargeWidth: 500 

// Setting the duration of the enlargement.
enlargeDuration: 200 

// Setting the duration of closing the enlarged image.
closeDuration: 250 

// Setting the size of the close button.
closeButtonSize: 30 

// Setting if the image could be enlarged.
enlargeEnabled: true

// Setting the offset of the elnarged image.
enlargedOffset: [0, 0] 

Change log:

2015-01-07

• update.

---

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