jCarousel is a jQuery UI plugin that is used to create circular image galleries. It doesn’t use Canvas or SVG, so it can run under older browsers.

jquery image gallery with thumbnails, multiple image slider jquery example, automatic image slider in jquery, jquery carousel slider, jquery image slider example

Pure JavaScript Slider Image Carousel With Or Without Thumbnails

How to make use of it:

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

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

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

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

3. Wrap the photos 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. Connect to the plugin with the 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] 

jQuery Carousel Image Gallery with Cover-flow Effect, Carousel gallery Plugin/Github

See Demo And Download

Official Website(mgechev): Click Here

This superior jQuery/javascript plugin is developed by mgechev. For extra Advanced Usage, please go to the official website.